Question

所以这就是我的表格。

和我试过的JS：

$('#work_direction').on('click' , function() {

    $('.cad, .design, .shop, .cnc').on('click', function(){

        $classname = $(this).attr('class');
        if($('.' + $classname + ":checked").length > 0){
            $('#' + $classname).attr('checked','checked');
        } else {
            $('#' + $classname).removeAttr('checked');
        }
    });

});

在那里有一些功能，据我所知，它可以正常工作。但是，我想这样做，当在方向中选择“墨西哥”时，当用户检查S-SHOP或M-CNC时，它不应该在部门中检查这两个影响

商店（John Doe [3]）
CNC（John Doe [4]）

但它应该检查

墨西哥（John Doe [7]）

表格应该按照国内和海外的方式工作，因为当底部的C，D，S，M被检查时，顶部的CAD，设计，商店，CNC都会被检查掉。当用户选择“墨西哥”作为方向时，功能会发生如上所述的变化。

这是我尝试过的代码，Check and uncheck checkbox not working correctly但是我在beautifulcoder的评论中描述了一些问题：“基本上，我认为你遇到了事件冒泡的问题。如果你使用live（），jQuery会添加事件现在和将来。下次添加事件时，它会附加到列表中。“

我不确定如何实施修复或是否有更好的方法。

Answer 1

尽管事件冒泡可能存在潜在问题（因为每次单击下拉列表时都会添加新的onClick()函数），我相信您正在解决问题。看看你的代码：

$classname = $(this).attr('class');
if($('.' + $classname + ":checked").length > 0){
    $('#' + $classname).attr('checked','checked');
} else {
    $('#' + $classname).removeAttr('checked');
}

此部分抓取当前元素的类名并检查它是否已被选中。 然后找到ID与其自己的类名相匹配的元素，并检查或取消选中它。在您的示例中，除非您的CNC复选框的类名为mexico，否则永远不会选择ID为mexico的元素。此外，您的代码中没有任何地方在下拉选择框的值更改时更改这些类名称。

我建议如果您可以使用HTML5，请使用它提供的data feature。这将允许您指定应检查哪些元素而没有冲突或不正确的ID /类名称。

以下是其中的一个示例：JSFiddle

示例中的jQuery：

$('#work_direction').on('change', function() {
    if ($(this).val() == 'mexico') {
        $('.shop, .cnc').data('check', 'mexico');
    }
    else {
        $('.shop').data('check', 'shop');
        $('.cnc').data('check', 'cnc');
    }
});

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});

我的示例还允许在data-check属性中指定多个复选框。只需用空格划分每一个。

Answer 2

查看change事件以及prop函数，如此

$('#work_direction').on('change' , function() {
    var direction = $(this).val();
    $('#'+direction).prop('checked', true);
});

http://jsfiddle.net/jFN5T/7/

选中一个复选框，选中另一个复选框

2 个答案: