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

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 - CNC，它不应该检查了这两个在部门影响

• 店（John Doe的[3]）
• CNC（John Doe的[4]）

而是应该核对

• MEXI co（John Doe [7]）

该窗体应该像国内和海外一样工作，当底部的C，D，S，M检查结束时，顶部的CAD，Design，商店，数控，得到检查。当用户选择“墨西哥”作为方向时，功能如上所述变化。

这是我试过的代码，Check and uncheck checkbox not working correctly，但我在beautifulcoder的评论中描述过的问题：“基本上，我认为你遇到了事件冒泡的问题，如果你使用live（），jQuery将会添加事件，未来，下次你添加一个事件时，它会被追加到列表中。“

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

Answer 1

的change事件尽管可能有事件冒泡（因为你每增加一个新的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

看看加之prop功能，像这样

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

http://jsfiddle.net/jFN5T/7/