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

Question

这就是我的表单的样子。

http://jsfiddle.net/jFN5T/5/

和我试过的 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');
        }
    });

});

那里有一些功能，据我所知它可以工作。但是，我想这样做，以便当在 Direction 中选择“墨西哥”时，当用户勾选 S - SHOP 或 M - CNC 时，它不应该在 Departments 中勾选这两个受影响

• 商店（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/