javascript - Loop over html table and get checked checkboxes (JQuery)

Question

I have an HTML table with a checkbox in each row.
I want to loop over the table and see if there are any checkboxes that are checked.
The following does not work:

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

This prints in the console the following:

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

per row regardless of whether any checkbox is checked.

Update
Same issue with:

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

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!');
        }
    });
});

Answer 2

使用.filter(':has(:checkbox:checked)'即：

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

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中的演示。