jeudi 17 décembre 2015

jQuery - Unchecked other checkbox when CHECK ALL is checked

My purpose

When I click Check All in 1st column,its supposed that all check boxes in that column with be checked and Set button is showing. While the other check boxes at other column with be unchecked..Besides, when I click Check All in 2nd column, the Set button in 1st column will be hide and show up at 2nd column and then unchecked other check boxes.

HTML CODE :

<div id="allCheckboxes">
<table width="500px">
 <tr>
    <td>Check ALL <input type="checkbox" id="checkAll_1"><div id="setBttn_1" style="display:none;"><input type="button" value="Set"></div></td>
    <td>Check ALL <input type="checkbox" id="checkAll_2"><div id="setBttn_2" style="display:none;"><input type="button" value="Set"></div></td>
    <td>Check ALL <input type="checkbox" id="checkAll_3"><div id="setBttn_3" style="display:none;"><input type="button" value="Set"></div></td>
 </tr>
 <tr>
  <td><input type="checkbox" id="chkBox1" name="Box1" checked value="1" /></td>
  <td><input type="checkbox" id="chkBox2" name="Box2" value="12"/></td>
  <td><input type="checkbox" id="chkBox3" name="Box3" value="13"/></td>
  <tr>
  <td><input type="checkbox" id="chkBox10" name="Box1" checked value="001" /></td>
  <td><input type="checkbox" id="chkBox20" name="Box2" value="182"/></td>
  <td><input type="checkbox" id="chkBox30" name="Box3" value="123"/></td>
  </tr>
  <tr>
  <td><input type="checkbox" id="chkBox11" name="Box1" value="333" /></td>
  <td><input type="checkbox" id="chkBox181" name="Box2" value="184442"/></td>
  <td><input type="checkbox" id="chkBox101" name="Box3" checked value="1243"/></td>
  </tr>
 </table>
</div>

Jquery :

$('input[type="checkbox"]').on('change', function() {
            $(this).closest('tr').find('input').not(this).prop('checked', false);
        });

        $('#checkAll_1').change(function () {
            $('[name="Box1"]').prop('checked', $(this).prop("checked"));
            if($('#checkAll_1').is(':checked')){
                $('#setBttn_1').show();
            }else{
                $('#setBttn_1').hide();
            }
        });

        $('#checkAll_2').change(function () {
            $('[name="Box2"]').prop('checked', $(this).prop("checked"));
            if($('#checkAll_2').is(':checked')){
                $('#setBttn_2').show();
            }else{
                $('#setBttn_2').hide();
            }
        });

        $('#checkAll_3').change(function () {
            $('[name="Box3"]').prop('checked', $(this).prop("checked"));
            if($('#checkAll_3').is(':checked')){
                $('#setBttn_3').show();
            }else{
                $('#setBttn_3').hide();
            }
        });

The current result is when I click Check All at 1st column,its won't unchecked other check boxes and I click Check All at 2nd column, the Set button at 1st column wont hide.

LIVE DEMO : http://ift.tt/1QrluSW




Aucun commentaire:

Enregistrer un commentaire