使用 jQuery 获取复选框列表值答案

【问题标题】：Get checkbox list values with jQuery使用 jQuery 获取复选框列表值
【发布时间】：2010-11-20 05:32:07
【问题描述】：

在一个 div 中，我有一些复选框。当我按下按钮时，我想选中所有复选框的所有名称。你能告诉我怎么做吗？

<div id="MyDiv">
....
<td><%= Html.CheckBox("need_" + item.Id.ToString())%></td>
...
</div>

谢谢，

【问题讨论】：

或 'boxen' 也将被接受：P

标签： javascript jquery

【解决方案1】：

$(document).ready(function() {
    $('#someButton').click(function() {
        var names = [];
        $('#MyDiv input:checked').each(function() {
            names.push(this.name);
        });
        // now names contains all of the names of checked checkboxes
        // do something with it
    });
});

【讨论】：

为什么你给我解决方案就这么简单？！ ;-)
我无法在 java 中获取这个数组，我使用了 string[] 但仍然如此。错误是通过 .post 方法传递变量时。 com.opensymphony.xwork2.util.logging.commons.CommonsLogger 警告错误设置表达式'names[]'的值'[Ljava.lang.String;@4a004a0'
You can also use .map().

【解决方案2】：

因为没有人提到这个..

如果你想要的只是一个值数组，一个更简单的替代方法是使用.map() 方法。只要记住调用.get() 将jQuery 对象转换为数组即可：

Example Here

var names = $('.parent input:checked').map(function () {
    return this.name;
}).get();

console.log(names);

var names = $('.parent input:checked').map(function () {
    return this.name;
}).get();

console.log(names);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

纯 JavaScript：

Example Here

var elements = document.querySelectorAll('.parent input:checked');
var names = Array.prototype.map.call(elements, function(el, i) {
    return el.name;
});

console.log(names);

var elements = document.querySelectorAll('.parent input:checked');
var names = Array.prototype.map.call(elements, function(el, i){
    return el.name;
});

console.log(names);

<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

【讨论】：

【解决方案3】：

var aArray = [];
window.$( "#myDiv" ).find( "input[type=checkbox][checked]" ).each( function()
{
  aArray.push( this.name );

});

你可以把它放在一个函数中，点击按钮执行。

【讨论】：

【解决方案4】：

未经测试但应该可以工作：

$("#MyDiv td input:checked").each(function()
{
    alert($(this).attr("id"));
});

【讨论】：

【解决方案5】：

您应该为此使用地图。

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

【讨论】：

【解决方案6】：

试试这个..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

【讨论】：

【解决方案7】：

var nameCheckBoxList = "myCheckListName";
var selectedValues = $("[name=" + nameCheckBoxList + "]:checked").map(function(){return this.value;});

【讨论】：

【解决方案8】：

你可以试试这个……

$(document).ready(function() {
        $("button").click(function(){
            var checkBoxValues = [];
            $.each($("input[name='check_name']:checked"), function(){
                checkBoxValues.push($(this).val());
            });

            console.log(checkBoxValues);

        });
    });

【讨论】：