文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery-在下拉更改上取消复选框无效

问jquery-在下拉更改上取消复选框无效
EN

Stack Overflow用户

提问于 2016-12-19 16:33:32

回答 2查看 2.5K关注 0票数 1

我有一个用户列表。每个用户都有一个具有唯一值的复选框。有一个下拉菜单。当下拉列表被更改时，将检查一组用户。每次下拉列表的更改，都会检查一组新的用户。这么多是正常运作的。但是，我无法根据上一次选中的下拉值清除上一个复选框

    $(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，我尝试过 1)，试图清除所有以前选中的复选框中的每个下拉列表值。

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

2)为每个复选框添加了一个类，并试图取消对每个下拉列表值更改的以前复选框的选中。

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

当我尝试这两个选项时，没有任何复选框会被选中。是什么引起了这个问题？谢谢!

小提琴

jquery

html

checkbox

drop-down-menu

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-12-19 16:38:18

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

使用if else if而不是多个if语句，它可以使执行更快！

$(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>

希望这能有所帮助！

票数 2

Stack Overflow用户

发布于 2016-12-19 16:39:56

要删除复选框，只需使用以下命令：

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

因为如果您的复选框有一个非空复选属性，您的浏览器将将其计算为选中。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41227106

复制

相似问题

问jquery-在下拉更改上取消复选框无效
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery-在下拉更改上取消复选框无效EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery-在下拉更改上取消复选框无效
EN