0

I am trying to build filters for the users including a select/unselect all functionality.

I have founded plenty of correct examples but none of them has more than one filter on the demos, and right now it is behaving strangely.

When I click on (All) for filter1 it'is working fine but not the (All) for filter2...

JSFIDDLE:

https://jsfiddle.net/Max06270/pvtqpn8a/#&togetherjs=2tvV3Mhb7l

HTML:

<div id="filter1">
  <form action='#'>
    <input type="checkbox" id="select-all" checked>(All)<br>
    <!-- Should select/unselect only the F1 checkboxes -->
    <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br>
    <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br>
    <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br>
    <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br>
    <input type="submit" id="submit-f1" value="Apply">
  </form> 
</div>          
<br>
<div id="filter2">
  <form action='#'>
    <input type="checkbox" id="select-all" checked>(All)<br>
    <!-- Should select/unselect only the F2 checkboxes -->
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br>
    <input type="submit" id="submit-f2" value="Apply">
  </form> 
</div>

JS:

$("#select-all").change(function () {
    $(this).siblings().prop('checked', $(':checkbox').prop("checked"));
});

Thank you in advance, Max

Max06270
  • 67
  • 1
  • 9
  • 1
    You should be using a class for `select-all` instead of an ID. ID's are supposed to be UNIQUE to one element. Edit: Same goes for your input ID's; those should be classes too. –  Aug 17 '16 at 23:35

2 Answers2

1

You should not keep the same id. for both (All) checkboxes. Change id to class and use below code.

$(".select-all").change(function () {
    $(this).siblings().prop('checked', $(this).prop("checked"));
});

You were always checking the prop for first checkbox. Actually you need to check the property of clicked checkbox only.

Vijendra Kumar Kulhade
  • 2,217
  • 3
  • 15
  • 25
1

id Attribute Specifies a unique id for an element, so you must use class like this :

<div id="filter1">
    <form action='#'>
        <input type="checkbox" class="select-all" checked>(All)<br>
        //....
    </form> 
</div>

And

<div id="filter2">
  <form action='#'>
    <input type="checkbox" class="select-all" checked>(All)<br>
    //...
  </form> 
</div>

And change jquery code like this :

$(document).ready(function() {
    $("#filter2 .select-all, #filter1 .select-all").change(function() {
        if($(this).is(':checked'))
            $(this).siblings().prop('checked',true);
        else
            $(this).siblings().prop('checked',false);
    })
})

OR change like this :

$(document).ready(function() {
    $(".select-all").change(function () {
        $(this).siblings().prop('checked', $(this).prop("checked"));
    })
})

Final code :

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<div id="filter1">
    <form action='#'>
        <input type="checkbox" class="select-all" checked>(All)<br>
        <!-- Should select/unselect only the F1 checkboxes -->
        <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br>
        <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br>
        <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br>
        <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br>
        <input type="submit" id="submit-f1" value="Apply">
    </form> 
</div>
<br>
<div id="filter2">
  <form action='#'>
    <input type="checkbox" class="select-all" checked>(All)<br>
    <!-- Should select/unselect only the F2 checkboxes -->
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br>
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br>
    <input type="submit" id="submit-f2" value="Apply">
  </form> 
</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
$(document).ready(function() {
    $("#filter1 .select-all, #filter2 .select-all").change(function() {
        if($(this).is(':checked'))
            $(this).siblings().prop('checked',true);
        else
            $(this).siblings().prop('checked',false);
    })
    })
        </script>
    </body>
</html>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • Thank you for your help, this solution is working. However I am going to use to one provided by Vijendra Kulhade. – Max06270 Aug 18 '16 at 00:41