验证选中的复选框 javascript

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

使它们都成为同一个类或赋予所有相同的自定义属性

$(".classname") $("输入[name='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       
}
});