选中选中另一个复选框的复选框。

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

});

这里有一些功能，据我所知，它可以工作。但是，我希望这样，当在中选择“墨西哥”时，当用户检查S- SHOP或M时，就不应该在部门受影响的中取消这两种情况。

• 商店(无名氏3)
• CNC (无名氏4)

但相反，它应该能收买。

• 墨西哥(无名氏7号)

该表格的工作方式，无论是对国内和海外，即当底部C，D，S，M被检查，然后顶部CAD，设计，车间，数控，检查。当用户选择“墨西哥”作为方向时，功能会像上面所描述的那样发生变化。

下面是我尝试过的代码，选中和取消复选框不能正常工作，但我在漂亮编码器的评论中描述了一些问题：“基本上，我认为您遇到了事件冒泡的问题。如果您使用live()，jQuery现在和将来都会添加事件。下次添加事件时，它会被追加到列表中。”

我不知道如何实现修复，或者是否有更好的方法。

Answer 1

虽然事件冒泡可能有一个潜在的问题(因为每次单击下拉列表时都会添加一个新的onClick()函数)，但我认为您正在错误地攻击这个问题。看看你的代码：

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

此部分获取当前元素的类名，并检查是否检查了它。然后，查找ID与自己类名匹配的元素，并检查或取消检查它。在您的示例中，ID为mexico的元素将永远不会被选中，除非您的CNC复选框的类名为mexico。此外，当下拉复选框的值发生变化时，代码中的任何地方都不会更改这些类名。

我建议，如果您可以使用HTML5，请使用它提供的数据特征。这将允许您指定应该检查哪些元素，而不会出现冲突或不正确的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/