JQuery - チェックボックスの戻り値

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" /> 

2番目の入力は送信の目的で使用されます。 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を使用して値を選択しようとしましたが、同じ名前の2つの入力があるという事実は問題ではないかと思います。私は理解できない2つのことをしています。 1）それは2つの値を返します（それぞれの入力に対して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

あなたが.prop()を必要とするのjQueryのチェックボックスの値を取得します。

ダブル要素の問題については、ヘルパーにクラスを与えて、<input>メインクラスのみがこのクラスを受け取ることができます。

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

あなたのクリックハンドラは単純作るとプライマリ入力のためだけを登録。

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