复选框不能正常工作

Check and uncheck checkbox not working correctly

本文关键字：工作 常工作 不能 复选框      更新时间：2023-09-26
//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。下面是我的表单是如何设置的。

工作方向(选择):

    国内>离岸
    • 墨西哥

受影响部门(复选框)?

  • [] CAD
  • []设计
    • <
  • []商店/gh>
  • []数控
  • []会计
  • []离岸
  • []墨西哥

部门名单(复选框)?

  • [] c - CAD
  • [] d - DESIGN
  • [] s - SHOP
  • [] m - CNC

所以逻辑是，当工作方向是国内或离岸，c, d, s, m在底部勾选时，应该勾选的顶部应该是CAD, DESIGN, SHOP和CNC。但是，如果选择了Mexico，并且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，以及墨西哥在受影响的部门。

Try

$('#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);

这确保它只被调用一次。我通常把它包装在一个可以进行单元测试的helper对象中。

你必须改变所有这些行$('#' + $classname).removeAttr('checked');到，并尝试使用.prop() 

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

类符号是'。' not '#' change like below

//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);
            }
        });
    }
});
相关文章：