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

Question

我已经关注了这个 StackOverflow 问题的 Answer1 和 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's 和 Pavan's 回答它工作正常但现在我希望当我选择全部然后取消选择任何一个时它必须取消选中“全部"（第 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;                        
       });
   } 
});

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

或

$('#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);
});

使用change 方法代替click。

Answer 4

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

我想如果All（第4个复选框）是checked，那么所有的复选框都应该被选中，如果它是unchecked，那么所有的复选框都应该是unchecked它工作得很好

但是问题我发现如果All（第4个复选框）被选中，那么它会选中所有复选框，然后如果我取消选中任何复选框，那么All（第4个复选框）必须是@ 987654329@ 没有发生。

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

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

});

Working Demo: