jquery- unchecking checkbox on dropdown change not working

Question

I have a list of users. Each user has a checkbox having a unique value. There is a dropdown menu. And when the dropdown is changed, a set of users are checked. Each dropdown change, a new set of users are checked. This much is working properly. But I'm not able to clear the previous checkboxes checked based on the last selected dropdown value

HTML

    $(document).ready(function() {
      $('#ddl').on('change', function() {
        var selectedShift = this.value;
        //$('input:checkbox').attr('checked',false);
        //$(".shiftUsersClass").attr('checked', false);
        if (selectedShift == 1) {
          var result = [{
            "staff_id": "367"
          }, {
            "staff_id": "864"
          }];
        }
        if (selectedShift == 2) {
          var result =[{"staff_id":"370"}];
        }
        if (selectedShift == 3) {
          var result= [{"staff_id":"369"}];
        }
        if (selectedShift == 4) {
          var result= [{"staff_id":"378"}];
        }
        if (selectedShift == 5) {
          var result=[{"staff_id":"511"}];
        }
    
        $.each(result, function(index, res) {
          $("#shiftUsers" + res.staff_id).attr('checked', 'checked');
        });
    
      });
    });

Things I tried 1) Tried to clear all the previously checked checkbox for each change of dropdown value.

$('input:checkbox').attr('checked',false);

2) Added a class for each checkbox and tried to uncheck the previously checked checkbox for each change of dropdown value.

$(".shiftUsersClass").attr('checked', false);

When I tried both the option, no checkboxes are getting checked. What's causing this issue? Thanks!

FIDDLE

Saumya Rastogi · Accepted Answer

You can use $("input:checkbox").prop('checked', false);. You should uncheck all the checkboxes before iterating over your result set like this:

Use if else if instead of multiple if statements, it can make the excution faster!

$(function() {

	$('#ddl').on('change', function() {
    var selectedShift = this.value;
    //$('input:checkbox').attr('checked',false);
    //$(".shiftUsersClass").attr('checked', false);
    var result = [];
    if (selectedShift == 1) {
      result = [{
        "staff_id": "367"
      }, {
        "staff_id": "864"
      }];
    } else if (selectedShift == 2) {
      var result =[{"staff_id":"370"}];
    } else if (selectedShift == 3) {
      var result= [{"staff_id":"369"}];
    } else if (selectedShift == 4) {
      var result= [{"staff_id":"378"}];
    } else if (selectedShift == 5) {
      var result=[{"staff_id":"511"}];
    }

    $("input:checkbox").prop('checked', false);
    $.each(result, function(index, res) {
      $("#shiftUsers" + res.staff_id).prop('checked', true);
    });

  });

})

Hope this helps!

jquery- unchecking checkbox on dropdown change not working

Answers (2)

Related Questions