循环遍历 html 表并选中复选框(JQuery)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18331973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:23:49  来源:igfitidea点击:

Loop over html table and get checked checkboxes (JQuery)

javascriptjqueryhtml

提问by Jim

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:

我有一个 HTML 表格,每行都有一个复选框。
我想遍历表格,看看是否有选中的复选框。
以下不起作用:

$("#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…]

[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);  
});

回答by Minko Gechev

Use this instead:

改用这个:

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

Let me explain you what the selector does: input[type="checkbox"]means that this will match each <input />with type attribute typeequals to checkboxAfter that: :checkedwill match all checked checkboxes.

让我解释一下选择器是做什么的: input[type="checkbox"]意味着这将匹配每个<input />类型属性type等于checkbox之后的::checked将匹配所有选中的复选框。

You can loop over these checkboxes with:

您可以使用以下命令遍历这些复选框:

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

Here is demo in JSFiddle.

这是JSFiddle 中的演示。



And here is a demo which solves exactly your problem http://jsfiddle.net/DuE8K/1/.

这是一个演示,它可以完全解决您的问题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!');
        }
    });
});

回答by suhailvs

use .filter(':has(:checkbox:checked)'ie:

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

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

回答by Abel Lopes

The following code snippet enables/disables a button depending on whether at least one checkbox on the page has been checked.
以下代码片段根据是否已选中页面上的至少一个复选框来启用/禁用按钮。
$('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'));
         }
     });
});

Here is demo in JSFiddle.

这是JSFiddle 中的演示。