【发布时间】：2016-12-20 00:43:27
【问题描述】：
我有一个用户列表。每个用户都有一个具有唯一值的复选框。 有一个下拉菜单。并且当下拉列表更改时，会检查一组用户。每次下拉列表更改，都会检查一组新用户。这很多工作正常。但我无法清除基于最后选择的下拉值检查的先前复选框
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);
当我尝试了这两个选项时，没有选中任何复选框。 是什么导致了这个问题？谢谢！
【问题讨论】：
-
为什么不将当前选择的值保留在某个变量或隐藏字段中.....然后当下次选择值更改时......从隐藏字段中获取上一个值并取消选中复选框并设置隐藏字段中的新选定值.......这是我想到的快速逻辑。
标签： javascript jquery html checkbox drop-down-menu