下拉列表更改无效的jquery-取消选中复选框

时间：2016-12-19 16:33:33

标签： javascript jquery html checkbox drop-down-menu

我有一个用户列表。每个用户都有一个具有唯一值的复选框。 有一个下拉菜单。当下拉列表发生变化时，会检查一组用户。每次下拉列表更改，都会检查一组新用户。这很有效。但是我无法清除根据上次选择的下拉值

检查的先前复选框

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>

我尝试过的事情 1）尝试清除所有先前选中的复选框，以便每次更改下拉列表值。

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

2）为每个复选框添加了一个类，并尝试取消选中每个下拉值更改的复选框。

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

当我尝试这两个选项时，没有选中复选框。 是什么导致了这个问题？谢谢！

FIDDLE

2 个答案:

答案 0 :(得分：2)

您可以使用$("input:checkbox").prop('checked', false);。您应该在迭代结果集之前取消选中所有复选框，如下所示：

  

使用if else if代替多个if语句，可以加快执行速度！

＆＃13;
＆＃13; 
$(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);
    });

  });

})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 1 :(得分：1)

要删除选中的复选框，只需使用：

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

因为如果您的复选框具有非null的已选中属性，则您的浏览器会将其评估为已选中。

相关问题
最新问题