Select/Deselect All dynamic checkboxes in Rails 4 with Javascript

Question

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

enter image description here

= 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..

You have given the `id` wrong.It should be `$('#campaign_range_ids_4')` not `$('#campaign_beacon_range_ids_4')` — Pavan, Jul 08 '14 at 11:31

score 2 · Answer 1 · answered Jul 08 '14 at 11:40

2

As i said,it should be $('#campaign_range_ids_4') not $('#campaign_beacon_range_ids_4')

This will work too

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

Demo

answered Jul 08 '14 at 11:40

Pavan

33,316
7
50
76

By mistake I wrote $('#campaign_beacon_range_ids_4') then correct then also not worked... – Gagan Gami Jul 08 '14 at 11:42
1

Thanks Pavan...for your kind help 1+ for this :) – Gagan Gami Jul 08 '14 at 11:43
I am finding another issue... it works fine with select/deselect All but when I select All then deselect any one then it must uncheck "All" (4th checkbox) but it remains as it is.. – Gagan Gami Jul 08 '14 at 11:52

Sridhar R · Answer 2 · 2014-07-08T11:39:26.553

1

Error in Selectors ,It should be $('#campaign_range_ids_4') not $('#campaign_beacon_range_ids_4') use prop() to set the checkbox state

Try this

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

edited Jul 08 '14 at 11:39

answered Jul 08 '14 at 11:33

Sridhar R

20,190
6
38
35

I am finding another issue... it works fine with select/deselect All but when I select All then deselect any one then it must uncheck "All" (4th checkbox) but it remains as it is.. – Gagan Gami Jul 08 '14 at 11:52
I have solved the issue sorry to bother, check my answer... ;) – Gagan Gami Jul 08 '14 at 13:06

score 0 · Answer 3 · answered Jul 08 '14 at 11:37

0

change the selector to $('#campaign_range_ids_4')and do this:

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

instead of click use change method.

answered Jul 08 '14 at 11:37

Jai

74,255
12
74
103

Glad you got help from SO. – Jai Jul 08 '14 at 11:41

score 0 · Accepted Answer · edited May 23 '17 at 10:30

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

});

Select/Deselect All dynamic checkboxes in Rails 4 with Javascript

Updated Question

4 Answers4

Working Demo:

Linked