如何使用jQuery获取多个复选框值

如何获取使用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" />
user 007 asked 2020-01-14T09:00:06Z
12个解决方案
101 votes

尝试这个

<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();
        });
      });
    });
Juice answered 2020-01-14T09:00:19Z
59 votes

要从多个选中的复选框中获取值数组,请使用jQuery map / get函数:

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

这将返回带有检查值的数组,如下所示:['1', '2']

这是jsfiddle上的工作示例:[http://jsfiddle.net/7PV2e/]

dugokontov answered 2020-01-14T09:00:48Z
19 votes

你可以这样

$('.ads_Checkbox:checked')

您可以使用this.value遍历它们,并用复选框值填充数组。

现场演示

获取数组中选定复选框的值

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

使用.map()编辑

您还可以将jQuery.map与this.value一起使用,以获取所选复选框值的数组。

附带说明,使用this.value而不是$(this).val()将提供更好的性能。

现场演示

$('#save_value').click(function(){
    var arr = $('.ads_Checkbox:checked').map(function(){
        return this.value;
    }).get();
}); 
Adil answered 2020-01-14T09:01:39Z
4 votes

你可以这样得到他们

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

jsfiddle

rahul answered 2020-01-14T09:02:03Z
2 votes

您可以尝试;

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

这将在单个实例中返回所有复选框值。

这是一个正在运行的现场演示。

blasteralfred Ψ answered 2020-01-14T09:02:31Z
2 votes
$('input:checked').map(function(i, e) {return e.value}).toArray();
Jonas Sciangula Street answered 2020-01-14T09:02:47Z
1 votes

由于您对所有复选框都具有相同的类名,因此

   $(".ads_Checkbox") 

将为您提供所有复选框,然后您可以使用每个循环进行迭代,例如

$(".ads_Checkbox:checked").each(function(){
   alert($(this).val());
});
Maverick answered 2020-01-14T09:03:11Z
1 votes

您也可以使用$('input[name="selector[]"]').serialize();。它返回URL编码的字符串,例如:“ selector%5B%5D = 1&selector%5B%5D = 3”

Andriy Leshchuk answered 2020-01-14T09:03:31Z
1 votes

试试这个,jQuery如何获取多个复选框的值

对于演示或更多示例

<!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>  
<!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>  

Developer answered 2020-01-14T09:05:00Z
0 votes

尝试getPrameterValues()从多个复选框获取值。

joel answered 2020-01-14T09:05:20Z
0 votes

试试这个..(我是新蜜蜂。.所以如果我错了,我真的很抱歉。但是我通过这种方式找到了解决方案。

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

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

    health.push(odata);
});
Jakaria Muhammed Jakir answered 2020-01-14T09:05:40Z
-1 votes

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

AKHIL MJOY answered 2020-01-14T09:07:00Z
translate from https://stackoverflow.com:/questions/11945802/how-to-get-multiple-checkbox-value-using-jquery