javascript - 動的に作成されたボタンのクリックで動的に作成されたチェックボックスがオンになっているかどうかを確認するJavascript

Question

いくつかの理由により、グリッドにチェックボックスを動的に作成します。

また、同じグリッドにボタンを動的に作成します。

この特定のボタンをクリックして、チェックボックスがオンになっているかどうかを確認する必要があります。

チェックボックスがオンになっている場合は、チェックを外す必要があります。その逆も同様です。

javascriptでこれを達成することは可能ですか？

Answer 1

はい、可能です。

document.querySelector("button").addEventListener("click",function(){
    [].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){
        el.checked = !el.checked   //Invert
    });​
}, false);

idチェックボックスが動的に作成されるかどうかに関係なく、このコードはまたはを必要としないため、引き続き機能しますclass。

IE の場合:

document.getElementsByTagName("button")[0].addEventListener("click", function(){
    var ele = document.getElementsByTagName("input");
    for(var i=0;i<ele.length;i++){
        if(ele[i].type == "checkbox"){
            el.checked = !el.checked   //Invert
        }
    }
});

究極のjQueryソリューション！

$("button").click(function(){
    $("input[type=checkbox]").each(function(){
        this.checked = !this.checked;
    }
});

ライブデモ: http://jsfiddle.net/DerekL/jfeAd/

Answer 2

特定のコンテキスト内でチェックボックスを収集し（グリッド内の一部のcontianer）、チェックされたプロパティを現在のプロパティとは逆に設定できます。

var grid = <something that returns a reference to the grid>
var cb, cbs = grid.getElementsByTagName('input');

for (var i=0, iLen=cbs.length; i<iLen; i++) {
  cb = cbs[i];
  if (cb.type == 'checkbox') {
    cb.checked = !cb.checked;
  }
}