選中一個複選框，選中另一個複選框

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/