如何使用jQuery检查多个复选框而不给每个复选框分配id？

30 浏览
0 Comments

如何使用jQuery检查多个复选框而不给每个复选框分配id？

我正在尝试使用jQuery中的一个来检查多个复选框。我知道如何检查所有复选框或者检查多个具有id的复选框。但我想能够在此情况下不使用id来实现。

我所有的复选框都以类似的方式分组。我以一种一致的方式将它们分组。

我在fiddle上做了我的工作，链接在这里。

以下是我的代码

window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
    var $row = $(this);
    if ($row.children('td:first').find('input:checkbox').prop('checked')) {
        $(this).find('td.imageBox').each(function (index) {
            var $imageBox = $(this);
            if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
                ++(totals[index]);
            }
        });
    }
});
$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});
}

我的问题在于onCheckForm函数。

谢谢。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

查看该 fiddle 以获取更清晰的方式：

http://jsfiddle.net/W75dy/19/


    

        
    
 Programs

$('#Row1Chk').on('change', function(event) {
    $('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

0
0 Comments

备注：我为这个问题的副本撰写了答案，但意识到无法发布，因此在此处发布。本答案中表格结构不同，且更为简化。

让我们从一个非常简单的带有复选框列的表格开始：


    
        

            
                
                
            
            A column
        

    
    
        

            
                
            
            some cell data
        

        

            
                
            
            some cell data
        

        

            
                
            
            some cell data
        

        

            
                
            
            some cell data
        

        

            
                
            
            some cell data

这里，我在标题中放置了一个复选框，并使用了一个辅助功能标签（如果您愿意，您可以隐藏该标签）。

我还为标题单元格赋予了一个ID，并在td元素的headers属性中使用了该ID。尽管这不是我们正在做的必须条件，但似乎使用headers属性是一个合适的情况。如果您希望将某些行中的复选框移到另一列，则只需在该单元格中添加headers属性。

以下是一些JavaScript代码：

$('#toggleAll').change(function () {
    $('td[headers~="toggler"] >  input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

我们将一个函数绑定到标题中的复选框的change事件。

选择器将查找所有headers属性中以空格分隔的符号列表中包含IDtoggler的td元素的子元素复选框。

.prop()方法将复选框的checked属性设置为与标题中的复选框（“this”）的checked属性相匹配的值。

我们的基本功能在此完成。

我们可以通过将顶部的复选框状态更改为与行中的复选框状态相匹配来进行改进。

标题复选框的状态应该是：

  • 如果没有被选中，则为未选中
  • 如果选中数目在（0，n）之间，则为不确定状态
  • 如果有n项被选中，则为选中状态

其中n表示所有的复选框。

为了做到这一点，我们将一个函数绑定到表格行的每个框的change事件上：

$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
    var allChecked = true, noneChecked = true;
    var headerCheckbox = $('#toggleAll');
    $('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
        if(domElement.checked) {
            // at least one is checked
            noneChecked = false;
        } else {
            // at least one is unchecked
            allChecked = false;
        }
    });
    if(allChecked) {
        headerCheckbox.prop('checked', true);
        headerCheckbox.prop('indeterminate', false);
    } else if (noneChecked) {
        headerCheckbox.prop('checked', false);
        headerCheckbox.prop('indeterminate', false);
    } else {
        headerCheckbox.prop('indeterminate', true);
    }
});

我在这里使用.each()循环遍历合适的复选框，以确定是否所有、没有或某些复选框被选中。

请参见jsFiddle演示。

希望这能帮助你，我在回答问题时也学到了很多！

0