我正在使用JQuery。
我的问题是:如何更新数组变量中多个CheckBox
的值?
我对其进行了测试,在单击每个CheckBox
时,它更新了已检查的CheckBox
值,并在每次单击时从数组中删除了未选中的CheckBox
值。目前为止,一切都好。
但是在我的场景中,我有超过 5 个 CheckBox
es,如果我单击任何复选框,我想检查所有其他CheckBox
es 并在数组变量中更新它们的值。
我怎样才能做到这一点?
你可以创建 2 个数组:checked
和unchecked
来处理这个问题
试试这个
$(document).ready(function(){
$('input[type=checkbox]').on('change', function() {
var checked = [];
var unchecked = [];
$("input[type='checkbox']:checked").each(function() {
checked[checked.length] = this.value;
});
$("input[type='checkbox']:not(:checked)").each(function() {
unchecked[unchecked.length] = this.value;
});
console.log(checked);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" />4
<input type="checkbox" value="5" />5
</body>
</html>
我将这个复选框放在每个循环中,该循环具有相同的名称但动态 ID。 它将在 DOM 中填充多个复选框。
<input class="btn btn-primary" id="Supplementarylesson_@objectlesson.LessonId" name="Supplementarylesson" value="@objectlesson.LessonId" type="checkbox")>
<label for="checkboxIsSmartSyllabus">
Mark Supplementary
</label>
获取多个复选框的值并存储到数组中,如果选中复选框我们将值存储为 true 否则在数组中为 false
$("#btnSupplementaryLesson").click(function () {
var SupplementaryLesson = [];
$.each($("input[name='Supplementarylesson']"), function () {
SupplementaryLesson.push({ id: $(this).val(), value: $(this).is(':checked')?true:false });
});
SupplementaryLesson = JSON.stringify({ 'SupplementaryLesson': SupplementaryLesson });
BlockUI();
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: '/LessonPlan/UpdateSupplementaryLesson',
data: SupplementaryLesson,
success: function () {
UnBlockUI();
showMessage("Lessons have been marked successfully.", "success");
},
failure: function (response) {
UnBlockUI();
showMessage("There is an error in saving supplementary content. Please contact system administrator.", "danger");
}
});
})
在控制器端,Action 方法具有
public JsonResult UpdateSupplementaryLesson(List<SupplementaryLesson> SupplementaryLesson)
{
LessonPlanFacade ObjectLessonPlanFacade = new LessonPlanFacade();
bool result=
ObjectLessonPlanFacade.UpdateSupplementaryLesson(SupplementaryLesson);
if (result)
return Json(new { status = true });
return Json(new { status = false });
}