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

【问题标题】：How to get multiple checkbox values using jQuery?如何使用 jQuery 获取多个复选框值？
【发布时间】：2020-06-01 10:50:15
【问题描述】：

如何获取使用 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" />

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个

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

【讨论】：

如何显示这个？我试过document.getElementById("#mydiv").innerHTML = i;但它只显示一个结果，如何显示它与所有检查的结果？
@Gosi innerHTML 替换内容。 “i”也代表一个int

【解决方案2】：

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

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

这将返回带有检查值的数组，例如：['1', '2']

这是关于 jsfiddle 的工作示例：http://jsfiddle.net/7PV2e/

【讨论】：

为什么不使用地图回调的第一个参数“_”？
@JuniorUsca：jQuery 的map 方法的第一个参数是当前元素的索引（api.jquery.com/map）
地图函数参数中的“_”是什么意思？
@hendy0817: _ 是用于标记第一个参数不会在函数体中使用的约定。 _ 是一个有效的变量名。我可以调用第一个参数thisParameterWillNotBeUsed、index 或_unused，但将其命名为_ 是一种方便的方法。

【解决方案3】：

你可以这样，

$('.ads_Checkbox:checked')

您可以使用each() 遍历它们并用复选框值填充数组。

Live Demo

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

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() 会提供更好的性能。

Live Demo

$('#save_value').click(function(){
    var arr = $('.ads_Checkbox:checked').map(function(){
        return this.value;
    }).get();
});

【讨论】：

.map(function() 总是适用于多个值，@Adil 谢谢这很有帮助

【解决方案4】：

$('input:checked').map(function(i, e) {return e.value}).toArray();

【讨论】：

【解决方案5】：

你可以像这样得到它们

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

jsfiddle

【讨论】：

您真的应该将代码连同您的答案一起发布。说 jsfiddle 倒下了，或者死了......这个答案将毫无价值。它还可以帮助人们通过谷歌等找到答案。
有数千个答案在 SO 上使用 jsfiddle，而 jsfiddle 是以工作方式查看事物以提供更好的问题答案的最佳方式
使用 jsfiddle 很棒，请这样做，但也请在 Stackoverflow 中发布答案！就像我说的，说 jsfiddle 从互联网上消失了，有同样问题的人发现了这篇文章……没有答案，只是一个死链接。它也不会被搜索引擎索引。
好的，我会记住这一点，我也改变了答案

【解决方案6】：

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

For Demo or more Example

    $(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>

【讨论】：

这是我的荣幸。

【解决方案7】：

你可以试试；

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

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

Here 是一个有效的现场演示。

【讨论】：

【解决方案8】：

由于你对所有复选框都有相同的类名，因此

   $(".ads_Checkbox")

会给你所有的复选框，然后你可以使用每个循环来迭代它们

$(".ads_Checkbox:checked").each(function(){
   alert($(this).val());
});

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

试试这个......（伙计们，我是一只新蜜蜂......所以如果我错了，我真的很抱歉。但我通过这种方式找到了解决方案。）

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

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

    health.push(odata);
});

【讨论】：

【解决方案12】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。