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');
        });
    
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="form-group">
      <label>Select One</label>
      <select name="ddl" id="ddl" data-placeholder="-- Select --" class="form-control select2">
        <option value="">All</option>
        <option value="1">
          One </option>
        <option value="2">
          Two </option>
        <option value="3">
          Third </option>
        <option value="4">
          Four </option>
        <option value="5">
          Five </option>
      </select>
    </div>
    
    
    <div id="user367" class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">steve</h3>
    
          <div class="box-tools pull-right">
            <div class="checkbox">
              <label>
                <input id="shiftUsers367" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="367">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="user369" class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">sam</h3>
    
          <div class="box-tools pull-right">
            <div class="checkbox">
              <label>
                <input id="shiftUsers369" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="369">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="user370" class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">martha</h3>
    
          <div class="box-tools pull-right">
            <div class="checkbox">
              <label>
                <input id="shiftUsers370" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="370">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="user378" class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">bonnie</h3>
    
          <div class="box-tools pull-right">
            <div class="checkbox">
              <label>
                <input id="shiftUsers378" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="378">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="user511" class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">cathy</h3>
    
          <div class="box-tools pull-right">
            <div class="checkbox">
              <label>
                <input id="shiftUsers511" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="511">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="user864" class="col-md-4">
      <div class="box box-danger">
        <div class="box-header with-border">
          <h3 class="box-title">jordan</h3>
    
          <div class="box-tools pull-right">
            <div class="checkbox">
              <label>
                <input id="shiftUsers864" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="864">
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

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

why dont you keep the currently selected value in some variable or hidden field.....then when next time select value change....get the previous value from hidden field and unchek checkboxes and set new selected value in hidden field.......this is the quick logic that came into my mind. — pgcan
– pgcan, Commented Dec 19, 2016 at 16:40
Possible duplicate of Setting "checked" for a checkbox with jQuery? — bug-a-lot
– bug-a-lot, Commented Dec 19, 2016 at 16:53

Saumya Rastogi · Accepted Answer · 2016-12-19 16:43:27Z

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);
    });

  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Select One</label>
  <select name="ddl" id="ddl" data-placeholder="-- Select --" class="form-control select2">
    <option value="">All</option>
    <option value="1">
      One </option>
    <option value="2">
      Two </option>
    <option value="3">
      Third </option>
    <option value="4">
      Four </option>
    <option value="5">
      Five </option>
  </select>
</div>


<div id="user367" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">steve</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers367" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="367">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user369" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">sam</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers369" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="369">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user370" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">martha</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers370" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="370">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user378" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">bonnie</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers378" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="378">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user511" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">cathy</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers511" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="511">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user864" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">jordan</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers864" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="864">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

Hope this helps!

Martino Lessio · Accepted Answer · 2016-12-19 16:39:56Z

1

To remove a checked checkbox simply use this:

$('checkbox').removeAttr('checked');

Because if your checkbox has a non-null checked attribute, your browser will evaluate it as checked.

answered Dec 19, 2016 at 16:39

Martino Lessio

7811 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

jquery- unchecking checkbox on dropdown change not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related