选中复选框并取消选中某些事件

我有一份制造商名单。 我想允许多种选择的能力。 有一个所有品牌的列表，另外还有一个ALL按钮（暗示所有品牌都被选中）。

算法：

• 当有人点击ALL时，所有make复选框都需要取消选中，ALL按钮需要取消激活。
• 选择ALL按钮后，如果有人点击了make，则取消选择并激活ALL按钮。
• 当有人取消选择所有制作按钮时，再次选择ALL按钮，然后取消激活。

为了增加额外的复杂性，复选框在自定义css Jquery Buttonset中完成。

HTML

ALL MAKESAcuraAston MartinAudiBentleyBMWBuickCadillac
ChevroletChryslerDodgeFIATFordGMCHondaHyundai
InfinitiJaguarJeepKiaLand RoverLexusLincolnMaserati
MazdaMercedes-BenzMINIMitsubishiNissanPorscheRamScion
smartSubaruToyotaVolkswagenVolvo
 

JQUERY

 // the makes buttons $('.chkmakes').click(function(){ no_checked = $(".chkmakes:checked").length; if(no_checked==0) { // if not makes are checked $('#new_all + label').addClass('ui-state-active'); $('#new_all').prop('checked', true); //$('#new_all').attr('disabled', true); } else { $('#new_all + label').removeClass('ui-state-active'); $('#new_all').removeProp('checked'); $('#new_all').attr('disabled', false); } }); // all makes button $('#new_all').click(function(){ $('.chkmakes').each(function(){ $('.chkmakes').removeProp('checked'); $('.chkmakes' + label).removeClass('ui-state-active'); }); }); 

这是我到目前为止所做的工作版本： http ： //jsfiddle.net/mCM6S/

它只是不正常。 如果您取消选中所有品牌，那么ALL品牌会选择，但不会取消激活。 如果您单击另一个make，则不会取消选中ALL make。 我想可能每个（）循环函数都不对，但这可能只是它的一部分。

UPDATE

仍在努力取消激活和激活ALL按钮。 有任何想法吗？

Answer 1

改变你的所有电话

 prop('checked', true); 

至

 attr('checked', true); 

更新小提琴

附加说明：对于统一更改，例如更改常规选择器上的属性，不需要每个更改。 所以你可以改变

 $('.chkmakes').each(function(){ $('.chkmakes').removeProp('checked'); $('.chkmakes' + label).removeClass('ui-state-active'); }); }); 

至

 $('.chkmakes').attr('checked', false); $('.chkmakes + label').removeClass('ui-state-active'); 

另外，你的选择器在每个

$('.chkmakes' + label)需要更改为

$('.chkmakes + label')

Answer 2

尝试使用.prop('checked', true)和.prop('checked', false)代替。 我还清理了一些代码。 例如，如果您使用.each() ，则可以使用this来引用each()所在的元素。

 // the makes buttons $('.chkmakes').click(function(){ no_checked = $(".chkmakes:checked").length; var total = $(".chkmakes").length; if(no_checked==total) { // if all makes are checked $('#new_all').addClass('ui-state-active'); $('#new_all').prop('checked', true); } else { $('#new_all').removeClass('ui-state-active'); $('#new_all').prop('checked', false); } }); // all makes button $('#new_all').click(function(){ if($(this).is(":checked")) { $('.chkmakes').each(function(){ $(this).prop('checked', true); $(this).addClass('ui-state-active'); }); } else { $('.chkmakes').each(function(){ $(this).prop('checked', false); $(this).removeClass('ui-state-active'); }); } }); 

的jsfiddle

Answer 3

你有$('.chkmakes' + label) ，它应该是$('.chkmakes + label')

这应该解决你的每个问题。