使用Javascript选择/取消选择Rails 4中的所有动态复选框 [英] Select/Deselect All dynamic checkboxes in Rails 4 with Javascript

问题描述

我已遵循此StackOverflow问题 和 Pavan的 答案完美，但现在我想要当我选择全部然后取消选择任何一个，那么它必须取消选中全部（第四个复选框），但它保持原样。

解决方案

p>修改 Sridhar的 answer最后我得到了我更新的问题的答案。

我想要如果 All （第四个复选框）检查，则应选中所有复选框，如果未选中 c> $ c>所有（第四个复选框），然后它选中所有框，如果我取消选中任何复选框，然后全部 uncheked 这没有发生。

修改代码的解决方案：以后如果其他人面临同样的问题。

HTML代码：

 < input id = campaign_range_ids_1class =checkboxtype =checkboxvalue =1name =campaign [range_ids] []> London 
< input id =campaign_range_ids_2class =checkboxtype = checkboxvalue =3name =checkboxvalue =2name =campaign campaign [range_ids] []> USA 
< input id =campaign_range_ids_4class =checkboxtype =checkboxvalue =4name =campaign [range_ids] [] 
  

b
$ b

  $（'＃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）; 
} 
 
} 
  

工作演示：

I have followed this StackOverflow Question's Answer1 and Answer2

but not getting result.. As I am calling all checkbox list's data from Range tabel. and their id is also defined by data.. Let me show you the code for this screenshot

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

which returns as

<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][]">

I want if All means id="campaign_range_ids_4" is selected/deselected then all other check-boxes should be perform accordingly..

Here also have a screenshot of Range Table

I had tried this 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;
           });
       }
    });

Please correct me where I do Mistake.... Thanks in advance.. :)

Updated Question

I have followed Shridhar's and Pavan's answer it works perfectly but now I want that when I select All then deselect any one then it must uncheck "All" (4th checkbox) but it remains as it is..

解决方案

Modifying Sridhar's answer finally I got the Answer of my Updated Question's.

I wanted if All(4th checkbox) is checked then all check-box should be selected and if it's unchecked then all check-box should be unchecked it works perfectly

But Issue I had found that If All(4th checkbox) is selected then it check all boxes then if I unchecked any check-box then All(4th checkbox) must be uncheked which was not occur.

Solution by Modifying Code: In future if other people face the same issue..

HTML Code:

<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:

这篇关于使用Javascript选择/取消选择Rails 4中的所有动态复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！