循环遍历 HTML 表格并获取已选中复选框（JQuery）

Question

我有一个带有每行复选框的 HTML 表格。
我想循环遍历表格并查看是否有任何已选中的复选框。
以下方法无效：

$("#save").click( function() {
    $('#mytable tr').each(function (i, row) {
        var $actualrow = $(row);
        checkbox = $actualrow.find('input:checked');
        console.log($checkbox);
});

这将在控制台中打印以下内容：

[prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "input:checked", constructor: function, init: function…]

每行都会打印，无论是否选中任何复选框。

更新
同样的问题出现在：

$('#mytable tr').each(function (i, row) {                                                                                                 
   var $actualrow = $(row);
    $checkbox = $actualrow.find(':checkbox:checked');
    console.log($checkbox);  
});

- Jim

---

好的，一个 jQuery 对象被打印到控制台是正常的。你有检查它的 length 属性吗？ - Frédéric Hamidi

你尝试过使用 $actualrow.find('input').is(':checked'); 吗？ - Robert W. Hunter

记录 $checkbox.length。长度是否为非零？ - SoWhat

@FredericHamidi: 长度为0。 - Jim

那么我如何利用长度为0的事实呢？ - Jim

@Jim，就是这样。这意味着该行没有选中任何复选框。至于如何使用它，您可以编写一个 if 语句。 - Frédéric Hamidi

Answer 1

使用这个替代：

$('#save').click(function () {
    $('#mytable').find('input[type="checkbox"]:checked') //...
});

让我解释一下选择器的作用： input[type="checkbox"] 意味着这将匹配每一个 <input /> 标签中类型属性 type 值为 checkbox 的标签。 接下来： :checked 将匹配所有被选中的复选框。

你可以通过以下方式循环遍历这些复选框：

$('#save').click(function () {
    $('#mytable').find('input[type="checkbox"]:checked').each(function () {
       //this is the current checkbox
    });
});

这里有一个在JSFiddle中的演示。

---

还有一个解决你问题的演示：http://jsfiddle.net/DuE8K/1/。

$('#save').click(function () {
    $('#mytable').find('tr').each(function () {
        var row = $(this);
        if (row.find('input[type="checkbox"]').is(':checked') &&
            row.find('textarea').val().length <= 0) {
            alert('You must fill the text area!');
        }
    });
});

- Minko Gechev

---

我想单独获取每个复选框的状态。如果一个复选框被选中但是同一行的文本框没有填写，我想要显示一个警告。 - Jim

好的，但是我该如何让同一行中下一列的文本框检查是否已填写，如果未填写则显示警告？ - Jim

运行得非常好！我能不能问一下如何使相应的行变成红色，除了警报之外？ - Jim

让我们在聊天室中继续这个讨论。 - Minko Gechev

对不起！我刚看到你的消息。 - Jim

Answer 2

使用.filter(':has(:checkbox:checked)'，例如在ie中：

$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
 $('#out').append(this.id);
});

- suhailvs

Answer 3

以下代码片段根据页面上是否至少选中一个复选框来启用/禁用按钮。

$('input[type=checkbox]').change(function () {
    $('#test > tbody  tr').each(function () {
        if ($('input[type=checkbox]').is(':checked')) {
            $('#btnexcellSelect').removeAttr('disabled');
        } else {
            $('#btnexcellSelect').attr('disabled', 'disabled');
        }
        if ($(this).is(':checked')){
            console.log( $(this).attr('id'));
         }else{
             console.log($(this).attr('id'));
         }
     });
});

这里有一个JSFiddle的演示。

- Abel Lopes