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

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

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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: