mercredi 17 août 2016

Jquery Unselect all Checkbox Multiple Forms

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:

http://ift.tt/2bIUmSm

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




Aucun commentaire:

Enregistrer un commentaire