我有一个用户列表。每个用户都有一个具有唯一值的复选框。 有一个下拉菜单。当下拉列表发生变化时,会检查一组用户。每次下拉列表更改,都会检查一组新用户。这很有效。但是我无法清除根据上次选择的下拉值
检查的先前复选框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);
当我尝试这两个选项时,没有选中复选框。 是什么导致了这个问题?谢谢!
答案 0 :(得分:2)
您可以使用$("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);
});
});
})
&#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;
希望这有帮助!
答案 1 :(得分:1)
要删除选中的复选框,只需使用:
$('checkbox').removeAttr('checked');
因为如果您的复选框具有非null的已选中属性,则您的浏览器会将其评估为已选中。