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

这就是我的表单的样子

我试过的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时，它不应该在受影响的部门检查这两个

• 商店（约翰·多伊[3]）
• CNC（John Doe[4]）

但它应该检查一下

• 墨西哥（约翰·多伊[7]）

表格的工作方式应与国内和海外的工作方式相同，即当底部的C、D、S、M被勾选时，顶部的CAD、设计、车间、CNC被勾选。当用户选择“墨西哥”作为方向时，功能会发生如上所述的变化

下面是我尝试过的代码，但在beautifulcoder的评论中描述了一些问题：“基本上，我认为您遇到了事件冒泡的问题。如果您使用live（），jQuery将在现在和将来添加事件。下次添加事件时，它将被追加到列表中。”

---

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

看看

更改
事件以及
prop
函数

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

尽管事件冒泡可能存在潜在问题（因为每次单击下拉列表时都会添加一个新的
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/类名

下面是一个实际应用的例子：

示例中的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);
    });
});

我的示例还允许在
数据检查
属性中指定多个复选框。只需用空格分隔每个名称。
它们的id是否与类名相同？@jp310是的，除了“墨西哥”的id mexicoLooks很好，但当方向更改为墨西哥时，这会检查墨西哥（John Doe[7]）。我正在寻找墨西哥（John Doe[7]），当方向是墨西哥时，检查底部的CNC或商店。那么用户点击这些东西的顺序是什么？他们选择方向，然后检查CNC和/或车间。然后它会自动检查John Doe[7]？是否不允许用户手动单击John Doe[7]旁边的复选框？因为否则CNC和SHOP等的可用性应该高于员工。我100%同意你的说法，当我发现经理甚至没有点击受影响部门下的复选框时，我有点惊慌。不幸的是，很难改变他们的方式，更不用说让他们在提交表格之前仔细检查了。这个过程是这样的，工作方向->部门和他们在部门中勾选的任何内容都应该勾选上面的正确受影响部门复选框。。如果您无法使用
数据
属性，您可能可以使用
类
属性执行相同的操作，
.is（）
jQuery方法不需要解决方法。所有现代浏览器都支持数据属性，包括IE8:哇，这太酷了。它现在起作用了，稍后将在另一页中提及。谢谢你，内特！