选中并取消选中复选框无法正常工作

Question

//if work direction = mexico and departments checked = Shop and CNC
//check off Mexico in Dept. Affected but don't check off Shop and CNC

    $('#work_direction').live('click' , function() {
        if ($('select[name^="workorder[work_direction]"]').val() == "mexico") {

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

        }else if ($('select[name^="workorder[work_direction]"]').val() == "domestic"){

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

        }else{

        $('.cad, .design, .shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('#' + $classname).attr('checked','checked');
            } else {
                $('#' + $classname).removeAttr('checked');
            }
        });
    }
});

这就是我用来进行检查的 jQuery。下面是我的表单的设置方式。

工作方向（选择）：

• 国内
• 海上
• 墨西哥

受影响的部门（复选框）？

• [] 加元
• [] 设计
• [] 店铺
• [] 数控系统
• [] 会计
• [] 海上
• [] 墨西哥

部门阵容（复选框）？

• [] c - CAD
• [] d - 设计
• [] s - 商店
• [] m - CNC

所以逻辑是，当工作方向是国内或离岸时，c、d、s、m 在底部被选中，应该被选中的顶部应该是 CAD、DESIGN、SHOP 和 CNC。但是，如果选择了墨西哥并勾选了 c、d、s 或 m，则最应该勾选的是 CAD、DESIGN、MEXICO，而不是 SHOP 和 CNC。

现在有时 CAD 和 DESIGN 不会受到影响，因此如果选择墨西哥，几乎总是 SHOP 或 CNC 会受到影响，因此如果用户在底部选择 s 或 m，则应勾选上面的墨西哥，但不勾选 SHOP 或 CNC .

我希望我的解释不会太混乱，但我不确定为什么我的 jQuery 不起作用。目前，即使选择了墨西哥并选择了 c、d、s 或 m，它也会在受影响的部门中检查 CAD、DESIGN、SHOP、CNC 以及 MEXICO。

Answer 1

试试

$('#work_direction').change(function() { ... });
var callback = function () { ... };
$('.shop, .cnc').unbind('click', callback);
$('.shop, .cnc').bind('click', callback);

最后，你可能会也可能不会在使用 attr() 时遇到问题，请改用 prop()。

编辑

假设你的回调是一样的：

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

您现在可以根据需要附加和分离：

$('.shop, .cnc').unbind('click', callback);
$('.shop, .cnc').bind('click', callback);

这确保它只被调用一次。我通常将它包裹在一个可以进行单元测试的辅助对象周围。

Answer 2

您必须将所有这些行 $('#' + $classname).removeAttr('checked'); 更改为，并尝试使用 .prop()

 $('.' + $classname).prop('checked',false);

类符号是'.'不是像下面的'#'改变

//if work direction = mexico and departments checked = Shop and CNC
//check off Mexico in Dept. Affected but don't check off Shop and CNC

    $('#work_direction').live('click' , function() {
        if ($('select[name^="workorder[work_direction]"]').val() == "mexico") {

            $('.shop, .cnc').live('click', function(){
                $classname = $(this).attr('class');
                if($('.' + $classname + ":checked").length > 0){
                    $('#mexico').prop('checked',true);
                } else {
                    $('.' + $classname).prop('checked',false);
                }
            });

        }else if ($('select[name^="workorder[work_direction]"]').val() == "domestic"){

        $('.shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('.' + $classname).prop('checked',true);
            } else {
                $('.' + $classname).prop('checked',false);
            }
        });

        }else{

        $('.cad, .design, .shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('.' + $classname).prop('checked',true);
            } else {
                $('.' + $classname).prop('checked',false);
            }
        });
    }
});