如何使用 JQuery 一次更新数组变量上的多个复选框值



我正在使用JQuery。
我的问题是:如何更新数组变量中多个CheckBox的值?

我对其进行了测试,在单击每个CheckBox时,它更新了已检查的CheckBox值,并在每次单击时从数组中删除了未选中的CheckBox值。目前为止,一切都好。

但是在我的场景中,我有超过 5 个 CheckBox es,如果我单击任何复选框,我想检查所有其他CheckBox es 并在数组变量中更新它们的值。

我怎样才能做到这一点?

你可以创建 2 个数组:checkedunchecked来处理这个问题

试试这个

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

最新更新