在jQuery中获取选中复选框列表的值数组。

Question

我有一个复选框列表，当页面加载时所有复选框都被预先选中。

首先，我想读取所有复选框（已选中）的值并存储在全局数组中。

然后，每当用户点击任何复选框（取消选中/选中），我都希望仅更新已选中复选框的值。

我想在jQuery中完成所有这些操作。

谢谢

- Wikki

---

我不确定为什么你想将这个拉入数组中，因为你已经有了一个控件数组... 它已经有效地存在了，没有必要重复努力。 - Lazarus

你在任何答案或评论中找到解决方案了吗？ - He Nrik

Answer 1

<input type="checkbox" value="somevalue1" class="chk">
<input type="checkbox" value="somevalue2" class="chk">
<input type="checkbox" value="somevalue3" class="chk">
<input type="checkbox" value="somevalue4" class="chk">
<input type="checkbox" value="somevalue5" class="chk">
<script>
var someGlobalArray = new Array;

$(".chk").click(function() {
    someGlobalArray=[];
    $('.chk:checked').each(function() {
        someGlobalArray.push($(this).val());
    });
    console.log(someGlobalArray);
});
</script>

- Vitalii Maslianok

---

这很好，当复选框再次被选中时，我该如何进行更新。 - Wikki

我有这个函数function updateCategoryList() { //g_categoryList = []; $('.g_chkCat:checked').each(function() { g_categoryList.push($(this).val()); }); //$('#t').val(categoryList); alert("Length: "+g_categoryList.length +" Values: "+g_categoryList); }如何将复选框的点击链接到再次调用此函数 - Wikki

$(".g_chkCat").click(function() { g_categoryList = []; $('.g_chkCat:checked').each(function() { g_categoryList.push($(this).val()); }); //$('#t').val(categoryList); alert("长度: "+g_categoryList.length +" 值: "+g_categoryList); } - Vitalii Maslianok

Answer 2

你是不是想要这样的内容？

var arrCheckboxes;
var checkboxSelector = "input[type='checkbox']";
$("body").delegate(checkboxSelector , "click", function(){
    arrCheckboxes = $(checkboxSelector).map(function() {
        return this.checked;
    }).get();
});

如果你想要一个包含名称（或ID或元素）的对象数组，可以像这样操作：

也许你应该将$("body")更改为更精确的容器。

var arrCheckboxes;
var checkboxSelector = "input[type='checkbox']";
$("body").delegate(checkboxSelector , "change", function(){
    arrCheckboxes = $(checkboxSelector).map(function() {
        return { name: this.name, val: this.checked };
    }).get();
});

- He Nrik

---

我有这些复选框 ul>li>input - Wikki

$("ul").delegate(...) 将类添加到 ul 和选择器上，如果您的页面上有多个列表。当您单击复选框时，它将冒泡到容器（在本例中为 <ul>）。这样，您就可以绑定一个事件，而不是每个复选框一个事件。 - He Nrik

Answer 3

我猜你想要的是被选中项目的名称或id，因为复选框的值是布尔类型的？

var checked = {};
$(':input[type="checkbox"]').each(function() {
    var name= this.name;
    var val = this.checked;
    if (val) {
        checked[name] = val;
    }
}).on('change', function() {
    var name = this.name;
    var val = this.checked;
    if (val) {
        checked[name] = val;
    } else {
        delete checked[name];
    }
});

对象checked将包含键，只有那些对应于已选中项目的键才会出现在该对象中。

工作演示请参见http://jsfiddle.net/tFYPF/

- Alnitak