复选框值未填充答案

【问题标题】：Checkbox Value not populating复选框值未填充
【发布时间】：2014-11-08 20:39:57
【问题描述】：

我无法弄清楚为什么复选框不显示值。原代码是

<input type="checkbox" name="@row.Checkbox.Name" value="@row.Checkbox.Text"/>

生成的 HTML 是

<input type="checkbox" name="chkparent" value=" I am the parent or legal guardian of the named child/children in my family membership and I give consent for them to take part in organised paddling activities (Kayak and/or Canoe) and I agree they will abide by the rules and regulations of Totnes Canoe Club at all times."/>

我尝试将生成的 html 直接放在页面中，但仍然没有显示值。我看到的只是复选框。

【问题讨论】：

如果你想显示一些文字，你需要创建一个标签或类似的元素。
通常复选框的值为真或假，即绑定到布尔值

标签： html asp.net asp.net-mvc asp.net-mvc-4 checkbox

【解决方案1】：

checkbox 的值不能用于显示文本。您需要在复选框旁边放置 div 或类似名称。像这样：

<div>
    <input type="checkbox" name="chkparent" style="float:left;margin-right:5px;"/>
    <div>
        I am the parent or legal guardian of the named child/children in my family membership and I give consent for them to take part in organised paddling activities (Kayak and/or Canoe) and I agree they will abide by the rules and regulations of Totnes Canoe Club at all times.
    </div>
</div>

如果你想让用户更容易做到这一点，你应该给文本附加一个点击处理程序（假设是 jQuery）：

<div>
    <input type="checkbox" id="chkparent" name="chkparent" style="float:left;margin-right:5px;"/>
    <div id="chktext" style="cursor:pointer;">
        I am the parent or legal guardian of the named child/children in my family membership and I give consent for them to take part in organised paddling activities (Kayak and/or Canoe) and I agree they will abide by the rules and regulations of Totnes Canoe Club at all times.
    </div>
</div>

<script>
    $(function(){
        $("#chktext").on("click", function(){
            if ($("#chkparent").is(":checked")) {
               $("#chkparent").prop("checked", false);
            } else {
               $("#chkparent").prop("checked", true);
            }
        });
    });
</script>

【讨论】：

当你可以使用<label>时，为什么还要使用jquery来做到这一点
好点！我有偏见，我总是在没有输入元素的情况下创建自定义复选框。

【解决方案2】：

您最好为此创建一个具有 bool 属性的强类型视图模型并用显示名称装饰它。

然后可以使用显示名称来呈现如下标签：

查看模型

public class AViewModel
{
    [DisplayName("Selection 1")]
    public bool MySelection { get; set; }
}

查看

@Html.LabelFor(m => m.MySelection)
@Html.CheckBoxFor(m => m.MySelection)

Working example

【讨论】：

【解决方案3】：

您可以在返回视图之前验证控制器中的row.Checkbox 值，以检查该复选框是否应该被选中。

然后，将该信息分配给 ViewBag 变量：

ViewBag.checked = "checked";

在你看来：

<input type="checkbox" name="@row.Checkbox.Name" @ViewBag.checked/>

这将产生一个HTML

<input type="checkbox" name="@row.Checkbox.Name" checked/>

如果复选框应该被选中并且

<input type="checkbox" name="@row.Checkbox.Name"/>

对于未选中的复选框

【讨论】：

【解决方案4】：

在不修改当前模型的情况下，代码应如下所示：

<label for="@row.Checkbox.Name">@row.Checkbox.Text @Html.CheckBox(row.Checkbox.Name, false)</label>

【讨论】：