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/