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

Question

我按照这个StackOverflow的问题的正确答案为和ANSWER2

但没有得到结果。当我从Range表中调用所有复选框列表的数据时。 并且它们的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和Pavan的回答，它的工作原理非常完美，但是现在我希望当我选择All时，再取消选择任何一个，然后必须取消选中“ All”（第4个复选框），但它保持原样。

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);
    }

});

演示

要么

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

演示

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 （4复选框）被checked ，那么所有复选框应该被选中，如果它unchecked ，那么所有复选框，应unchecked它完美

但问题我已经发现，如果All （4复选框）被选中，那么它检查所有箱子然后如果我未选中任何复选框，然后All （4复选框）必须uncheked这是不会发生。

修改代码后的解决方案：将来如果其他人遇到相同的问题。

HTML代码：

<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

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);
    }

});

工作演示：