64

jQueryを使用して選択されたチェックボックスの値を取得するにはどうすればよいですか？

私のHTMLコードは次のとおりです。

<input  id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input  id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input  id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input  id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />
4

12 に答える 12

128

これを試して

<input name="selector[]" id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input name="selector[]" id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input name="selector[]" id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input name="selector[]" id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />

働き

    $(function(){
      $('#save_value').click(function(){
        var val = [];
        $(':checkbox:checked').each(function(i){
          val[i] = $(this).val();
        });
      });
    });
于 2012-08-14T04:32:22.307 に答える
72

チェックされた複数のチェックボックスから値の配列を取得するには、jQuery map/get関数を使用します。

$('input[type=checkbox]:checked').map(function(_, el) {
    return $(el).val();
}).get();

これにより、次のように、チェックされた値を持つ配列が返されます。['1', '2']

これがjsfiddleの実例です：http：//jsfiddle.net/7PV2e/

于 2013-07-15T15:15:21.193 に答える
25

あなたはこのようにそれを行うことができます、 

$('.ads_Checkbox:checked')

それらを繰り返し処理しeach()、チェックボックスの値で配列を埋めることができます。

ライブデモ

配列内の選択されたチェックボックスの値を取得するには

var i = 0;
$('#save_value').click(function () {
       var arr = [];
       $('.ads_Checkbox:checked').each(function () {
           arr[i++] = $(this).val();
       });      
});

.map（）を使用して編集します

でjQuery.mapを使用しget()て、選択したチェックボックス値の配列を取得することもできます。

補足として、this.value代わりにを使用する$(this).val()と、パフォーマンスが向上します。

ライブデモ

$('#save_value').click(function(){
    var arr = $('.ads_Checkbox:checked').map(function(){
        return this.value;
    }).get();
});
于 2012-08-14T04:30:03.367 に答える
7

あなたはこのようにそれらを得ることができます 

$('#save_value').click(function() {
    $('.ads_Checkbox:checked').each(function() {
        alert($(this).val());
    });
});

jsfiddle

于 2012-08-14T04:33:56.403 に答える
7 
$('input:checked').map(function(i, e) {return e.value}).toArray();
于 2017-12-14T15:09:54.017 に答える
6

これを試してください、jQuery複数のチェックボックスの値を取得する方法

デモ以上の例

    $(document).ready(function() {
        $(".btn_click").click(function(){
            var test = new Array();
            $("input[name='programming']:checked").each(function() {
                test.push($(this).val());
            });
 
            alert("My favourite programming languages are: " + test);
        });
    });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>
<body>
    <form>
        <h3>Select your favorite Programming Languages :</h3>
        <label><input type="checkbox" value="PHP" name="programming"> PHP</label>
        <label><input type="checkbox" value="Java" name="programming"> Java</label>
        <label><input type="checkbox" value="Ruby" name="programming"> Ruby</label>
        <label><input type="checkbox" value="Python" name="programming"> Python</label>
        <label><input type="checkbox" value="JavaScript" name="programming"> JavaScript</label>
        <label><input type="checkbox" value="Rust" name="programming">Rust</label>
        <label><input type="checkbox" value="C" name="programming"> C</label>
        <br>
        <button type="button" class="btn_click" style="margin-top: 10px;">Click here to Get Values</button>
    </form>
</body>
</html>

于 2019-04-25T05:53:13.827 に答える
3

試してみてください。

$('#save_value').click(function(){
    var final = '';
    $('.ads_Checkbox:checked').each(function(){        
        var values = $(this).val();
        final += values;
    });
    alert(final);
});

これにより、単一のインスタンスですべてのチェックボックス値が返されます。

これが実際のライブデモです。

于 2012-08-14T04:46:29.230 に答える
1

uはすべてのチェックボックスに対して同じクラス名を持っているので、したがって

   $(".ads_Checkbox")

すべてのチェックボックスが表示され、次のように各ループを使用してそれらを繰り返すことができます。

$(".ads_Checkbox:checked").each(function(){
   alert($(this).val());
});
于 2012-08-14T04:34:54.037 に答える
1

また、を使用することができます$('input[name="selector[]"]').serialize();。次のようなURLエンコードされた文字列を返します： "selector％5B％5D = 1＆selector％5B％5D = 3"

于 2013-09-03T08:43:04.850 に答える
0

getPrameterValues()複数のチェックボックスから値を取得してみてください。

于 2013-03-18T05:29:06.167 に答える
0

これを試してみてください..（みんな私は新しい蜂です..だから私が間違っていたら本当に申し訳ありません。しかし私はこの方法で解決策を見つけました。）

var suggestion = [];
$('#health_condition_name:checked').each(function (j, ob) {

    var odata = {
        health_condition_name: $(ob).val()
    };

    health.push(odata);
});
于 2016-08-12T20:29:29.460 に答える
-1 

$(document).ready(function(){
$(".chk").click(function(){
var d = $("input[name=test]"); if(d.is(":checked")){
//
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="test"> `test1`
<input type="checkbox" name="test"> `test2`
<input type="checkbox" name="test"> `test3`
<input type="button" value="check" class='chk'/>

于 2019-03-21T12:59:46.233 に答える