Question

这是我的代码jsfiddle

JS file

$( document ).ready(function() {

    $(".test").children().filter(function(index, elem){
      console.log($(elem).children(":checked"));
    });

})

HTML

 <ul class="test">
 <li><input type="checkbox" name="1"><label>something</label></li>
 <li><input type="checkbox" name="2"><label>something</label></li>
 <li><input type="checkbox" name="3"><label>something</label></li>
 <li><input type="checkbox" name="4" checked><label>something</label></li>
 </ul>

我正在尝试选中所有选中的复选框，但如果我按:checked进行过滤，则会获得所有复选框。

我做错了什么？

Answer 1

更准确

var allChecked = $('.test input[type="checkbox"]:checked');

将所有选中的复选框作为具有类test的元素的子项，并测试复选框是否已选中，您可以使用

var bool = $(selector).is(":checked"); 
// return true if checked false if not
//where selector can be any jQuery selector

Answer 2

要选择选中的输入，您只需使用：

var checked = $("input:checked");

请参阅updated fiddle

如果必须仅限于ul内的输入，您也可以指定该类：

var checked = $(".test input:checked");

请参阅此fiddle to select all checked inputs in a given ul。

Answer 3

其他答案提供了更好的方法来选择您想要的复选复选框，我同意这些是更简单的方法，并且比您的过滤方法更可取，但在这里我尝试解释您实际看到的内容你拥有它的代码。

在Chrome调试器中找到你的小提琴并运行它，看起来它正在做正确的事情，你可能因为console.log()

我将你的console.log行拆分为两个单独的步骤 - 获取与:checked选择器匹配的子（ren），然后记录该变量;所以它看起来像：

$( document ).ready(function() {

    $(".test").children().filter(function(index, elem) {
        //console.log($(elem).children(":checked"));
        boxen = $(elem).children(":checked");
        debugger;
        console.log(boxen);
    });
})

updated fiddle

这循环调用filter（）函数四次 - 每个最初选择的$(".test").children()元素一次。在第一次调用时，索引将为0（零），elem将是第一个<li>元素。
调用boxen = $(elem).children(":checked");会给你[] ...即一个空数组，因为第一个 li 的孩子都没有被检查。
但是，当你console.log(boxen)时，它会为你提供一些＆＃34;奇怪的＆＃34; 输出，因为这是jQuery ...它不是一个普通的javascript数组。

当你进入第四次迭代时，查看第四个选定的元素，索引将是3，elem将是第四个<li>
当你在那个<{em> 上$(elem).children(":checked")时，你会得到类似[<input type="checkbox" name="4" checked>]的内容（你怎么看它会依赖于你的javascript调试器） - 所以这一次< strong> 选择一个选中的输入元素。

如果您在变量中选择了.children(":checked")，那么您确实会获得所需的一个复选框，但console.log()输出会欺骗您。

选中所有选中的复选框将使用JQuery返回所有复选框

3 个答案: