驗證選中的復選框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") $("input[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       
}
});