用于检查动态创建的按钮单击时是否选中动态创建的复选框的Javascript

时间:2012-06-07 02:11:36

标签: javascript

由于某些原因,我在网格中动态创建一个复选框..

我也在同一个网格中动态创建一个Button。

在此特定按钮上单击我需要检查是否选中了复选框。

如果选中复选框,我应该取消选中它。反之亦然。

是否可以在javascript中实现此目的?

2 个答案:

答案 0 :(得分:3)

是的,这是可能的。

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

无论是否动态创建复选框,此代码仍然有效,因为它甚至不需要任何idclass

对于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/

答案 1 :(得分:0)

您可以在特定上下文(网格中的某些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;
  }
}