Question

我正在使用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>

如何在每次单击时返回相应的值以指示复选框选择？

我试图使用bellow 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);

    });
});

Answer 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);
});

JQuery - Checkbox的返回值

1 个答案: