CODEWITHSUNDEEP
javascriptjquerycheckbox
Suffii
Suffii

Reputation: 5784

Issue on Deselecting All Checkbox on Un checking one of Child

I am trying to use jquery to check all checkboxes using below code which working fine on toggling select all on check and un check the slectAll

Now I want to uncheck the slectAll in case of a situation if a user un-check one of the ieldset checkboxes. I tried this code

    $.each($("input[name='numbers']:not(:checked)"), function () {
        $('input:checkbox[name=slectAll]').prop("checked", false);
    });

but it didn't do the job! 

<input id="boxid" type="checkbox" name="slectAll">
<label for="boxid">Select All</label>
<fieldset id="group_1">
    <input type="checkbox" name="numbers[]" value="0" />
    <input type="checkbox" name="numbers[]" value="1" />
    <input type="checkbox" name="numbers[]" value="2" />
    <input type="checkbox" name="numbers[]" value="3" />
    <input type="checkbox" name="numbers[]" value="4" />
</fieldset>

and the jquery file is

$(function () {
    $('input:checkbox[name=slectAll]').change(function () {
        if ($(this).is(':checked')) {
            $('#group_1').find(':checkbox').prop("checked", true);
        } else {
            $('#group_1').find(':checkbox').prop("checked", false);
        }
    });

    $.each($("input[name='numbers']:not(:checked)"), function () {
        $('input:checkbox[name=slectAll]').prop("checked", false);
    });

});

can you please let me know how to fix this? thanks

Upvotes: 0

Views: 38

Answers (2)

PeterKA
PeterKA

Reputation: 24638

You can compare the total number of the checkboxes with the number that's checked and flip slectAll as necessary:

$(function () {
    var sAll = $('input:checkbox[name=slectAll]'),
        other = $('#group_1 :checkbox');
    sAll.on('change', function() {
        other.prop('checked', this.checked);
    });
    other.on('change', function() {
        sAll.prop('checked', other.length === other.filter(':checked').length);
    });
});


$(function () {
    var sAll = $('input:checkbox[name=slectAll]'),
        other = $('#group_1 :checkbox');
    sAll.on('change', function() {
        other.prop('checked', this.checked);
    });
    other.on('change', function() {
        sAll.prop('checked', other.length === other.filter(':checked').length);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="boxid" type="checkbox" name="slectAll">
<label for="boxid">Select All</label>
<fieldset id="group_1">
    <input type="checkbox" name="numbers[]" value="0" />
    <input type="checkbox" name="numbers[]" value="1" />
    <input type="checkbox" name="numbers[]" value="2" />
    <input type="checkbox" name="numbers[]" value="3" />
    <input type="checkbox" name="numbers[]" value="4" />
</fieldset>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You need to have a change handler for those checkboxes also

$(function() {
  var $all = $('input:checkbox[name=slectAll]').change(function() {
    $checks.prop("checked", this.checked);
  });

  var $checks = $('#group_1 :checkbox').change(function() {
    $all.prop("checked", $checks.not(':checked').length == 0);
  });

  $('button').click(function() {
    var array = $checks.filter(':checked').map(function() {
      return this.value
    }).get();
    alert(array);


    return;
    //demo of ajax request
    $.ajax({
      url: '',
      data: {
        myvalues: array,
        usrename: somevalue
      }
    })
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="boxid" type="checkbox" name="slectAll">
<label for="boxid">Select All</label>
<fieldset id="group_1">
  <input type="checkbox" name="numbers[]" value="0" />
  <input type="checkbox" name="numbers[]" value="1" />
  <input type="checkbox" name="numbers[]" value="2" />
  <input type="checkbox" name="numbers[]" value="3" />
  <input type="checkbox" name="numbers[]" value="4" />
</fieldset>

<button>Test</button>

Upvotes: 3

Related Questions