使用Javascript选择/取消选择Rails 4中的所有动态复选框

我已经按照StackOverflow问题的答案1和答案2

但没有得到结果..因为我从Range表中调用所有复选框列表的数据。 并且他们的id也是由数据定义的。让我告诉你这个截图的代码

 = f.collection_check_boxes :range_ids, Range.active, :id, :name, {},:class=>'checkbox' 

返回为

我希望如果选择/取消选择All意味着id="campaign_range_ids_4"则应该相应地执行所有其他复选框。

这里还有一个Range Table的截图

我曾尝试过这个Javascript

 :javascript $('#campaign_range_ids_4').click(function() { if(this.checked) { $('#campaign_range_ids_1').checked = true; $('#campaign_range_ids_2').checked = true; $('#campaign_range_ids_3').checked = true; }); } else { $('#campaign_range_ids_1').checked = false; $('#campaign_range_ids_2').checked = false; $('#campaign_range_ids_3').checked = false; }); } }); 

请纠正我在哪里犯错误….提前致谢.. 🙂

更新的问题

我跟随Shridhar和Pavan的答案它完美地工作但现在我想要当我选择All然后取消选择任何一个然后它必须取消选中“All”（第四个复选框）但它仍然保持原样。

Answer 1

正如我所说，它应该是$('#campaign_range_ids_4')而不是$('#campaign_beacon_range_ids_4')

这也会奏效

 $('#campaign_range_ids_4').click(function() { if(this.checked) { $(':checkbox').each(function() { this.checked = true; }); } else { $(':checkbox').each(function() { this.checked = false; }); } }); 

演示

Answer 2

选择器出错，应为$('#campaign_range_ids_4')而非$('#campaign_beacon_range_ids_4')使用prop()设置复选框状态

试试这个

 $('#campaign_range_ids_4').click(function () { if ($(this).is(':checked')) { $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true); } else { $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false); } }); 

DEMO

要么

 $('#campaign_range_ids_4').click(function () { $('#campaign_range_ids_1, #campaign_range_ids_2, #campaign_range_ids_3').prop('checked', $(this).is(':checked')); }); 

DEMO

Answer 3

将选择器更改为$('#campaign_range_ids_4')并执行以下操作：

 $('#campaign_range_ids_4').change(function() { $('#campaign_range_ids_1, #campaign_range_ids_2, #campaign_range_ids_3').prop('checked', this.checked); }); 

而不是click使用change方法。

Answer 4

修改Sridhar的答案终于得到了我的更新问题的答案。

我想如果选中All （第四个复选框），则应unchecked所有复选框，如果unchecked选中，则应unchecked所有复选框，它将完美运行

但问题我发现如果选中All （第四个复选框）然后检查所有框，那么如果我取消选中任何复选框，则必须取消未选中的All （第四个复选框）。

修改代码的解决方案：将来如果其他人面临同样的问题..

HTML代码：

 London India USA All 

JavaScript的：

 $('#campaign_range_ids_4').click(function () { if ($(this).is(':checked')) { $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true); } else { $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false); } }); $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').click(function () { if ($(this).is(':checked')) { } else { $('#campaign_range_ids_4').prop('checked', false); } }); 

工作演示：