JQuery - 复选框的返回值答案

【问题标题】：JQuery - Return Value of CheckboxJQuery - 复选框的返回值
【发布时间】：2016-05-10 01:45:22
【问题描述】：

我正在使用 asp.net 及其 html 助手。 HTML.CheckBoxFor 帮助器返回一个复选框元素，如下所示。

<input data-val="true" 
    data-val-required="The isNewlyEnrolled field is required." 
    id="isNewlyEnrolled" 
    name="isNewlyEnrolled" 
    type="checkbox" 
    value="true" />

<input name="isNewlyEnrolled" type="hidden" value="false" />

第二个输入用于提交目的。使用 JQuery 我想在单击相对复选框时仅返回当前值或新值。然而，事实证明这很困难。

这是我的代码：

@model MapBuilder2_0.Models.MapLayers
<h1>Map Layers</h1>
<p>Select the layers to be included on the <b>map</b>. All are selected by default.</p>
<div class="btn-group" id="map-layers-btn">
<label class="btn btn-primary active">
    Layer1
    @Html.CheckBoxFor(m => m.MapLayer01)   
</label>
<label class="btn btn-primary active">
    Layer 2
    @Html.CheckBoxFor(m => m.MapLayer02)   
</label>
<label class="btn btn-primary active">
    Layer 3
    @Html.CheckBoxFor(m => m.MapLayer03)   
</label>
<label class="btn btn-primary active">
    Layer 4
    @Html.CheckBoxFor(m => m.MapLayer04)   
</label>
<label class="btn btn-primary active">
    Layer 5
    @Html.CheckBoxFor(m => m.MapLayer05)   
</label>
<label class="btn btn-primary active">
    Layer 6
    @Html.CheckBoxFor(m => m.MapLayer06)   
</label>

如何在每次单击时返回适当的值来指示复选框的选择？

我尝试使用波纹管 jquery 选择值，但我认为存在两个同名输入的事实是有问题的。它正在做我无法理解的两件事。 1）它返回两个值（我假设每个输入一个）和2）它不会改变以反映它是否被选中。它只返回初始的真值。

<script>
$(document).ready(function () {
    $("#map-layers-btn").children("label").on('click', function () {
        var child = $(this).children("input");
        var child_val = child.attr("value");

        alert(child_vala);

    });
});

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

要在 jQuery 中获取复选框值，您需要 .prop()。

对于双元素问题，你可以给你的助手一个类，只有主 <input> 会收到这个类。

@Html.CheckBoxFor(m => m.MapLayer1, new { @class="mapchk" })

使您的点击处理程序更简单，并仅为主要输入注册。

$(".mapchk").on("click", function(e) {
    var isChecked = $(this).prop("checked");
    console.log(isChecked);
});

【讨论】：