Question

如果我选中并取消选中复选框列表，我会尝试“实时”更新。

使用此代码：

window.onload = function () {
  var input = document.getElementById('listTaxi');

  function check() {
      var a = input.checked ? "checked" : "not checked";
      console.log(a);
  }
  input.onchange = check;
  check();
}

我可以为一个复选框执行此操作，但如何设置多个复选框？复选框的列表（div）？

谢谢！

Answer 1

在要检查的所有复选框上分配一个类，如果选中，则

<强>复选框

<input type="checkbox" class="checkboxes" id="checkbox1"/>
<input type="checkbox" class="checkboxes" id="checkbox2"/>
<input type="checkbox" class="checkboxes" id="checkbox3"/>
<input type="checkbox" class="checkboxes" id="checkbox4"/>

纯Javascript

// getting all checkboxes
var checkboxes = document.getElementsByClassName('checkboxes');

// go through all checkboxes
for(var i = 0; i <= checkboxes.length - 1; i++){
  checkboxes[i].onchange = function(e){
    alert('Element with id ' + e.target.getAttribute('id') + ' is checked ' +e.target.checked);
  }
}

Codepen http://codepen.io/todorutandrei/pen/rLBQOX

或者您可以使用JQUERY - 更简单

$('.checkboxes').change(function(){
  var item = $(this);
  alert('Element with id ' + item.attr('id') + ' is ' + item.is(':checked'));
})

Codepen http://codepen.io/todorutandrei/pen/MegzwR

Answer 2

将它们设为同一个类或赋予所有相同的自定义属性

$（ “类名”） $（“输入[名称= 'customName']）

然后Jquery将选择所有

$("#id").change(function() {//if using class name or custom attr loop through the return elements and use a function below to handle the cases
 if($(this).is(":checked")) {
//code if checked
}
else{
//code if not checked       
}
});

验证已选中的复选框javascript

2 个答案: