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

Question

我已关注此StackOverflow问题的 Answer1 和 Answer2

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

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

以

返回

<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">

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

此处还有范围表的屏幕截图

我曾尝试过这个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's 和 Pavan's 回答它完美无缺，但现在我想要当我选择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;                        
       });
   } 
});

<强> Demo

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

OR

$('#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's 回答我得到了我更新的问题的答案。

我希望如果All（第四个复选框）为checked，则应选中所有复选框，如果它是unchecked，那么所有复选框都应为{{ 1}}它完美地运作

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

修改代码的解决方案：以后如果其他人遇到同样的问题..

HTML代码：

uncheked

<强> JavaScript的：

<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]">London
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]">India
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]">USA
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]">All

Working Demo: