1

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

Md. Nasir Uddin Bhuiyan
  • 1,598
  • 1
  • 14
  • 24
Smokey
  • 1,857
  • 6
  • 33
  • 63
  • 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 Dec 19 '16 at 16:40
  • Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) – bug-a-lot Dec 19 '16 at 16:53

2 Answers2

2

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!

Saumya Rastogi
  • 13,159
  • 5
  • 42
  • 45
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.

Martino Lessio
  • 775
  • 1
  • 9
  • 17