Javascript to check if a dynamically created checkbox is checked on a dynamically created button click

Question

Due to some reasons i m dynamically creating a checkbox in a Grid..

Also i m dynamically creating a Button in the same Grid.

On this particular button click i need to check if the checkboxes are checked or not.

If the checkboxes are checked i should uncheck it.and vice versa.

Is it possible to achieve this in javascript?

In other words, you didn't actually ask a question that required more than a yes/no response. If you have a specific question about how to do this, then we'll be positively glad to help if you show us what you have so far, and explain exactly where you think it's gone wrong. — Chris Tonkinson
– Chris Tonkinson, Commented Jun 8, 2012 at 12:17

Derek 朕會功夫 · Accepted Answer · 2012-06-07 04:30:17Z

3

Yes it is possible.

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

No matter the checkboxes are created dynamically or not, this code will still work because it does not even need any id or class.

For 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
        }
    }
});

Ultimate jQuery solution!

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

LIVE DEMO: http://jsfiddle.net/DerekL/jfeAd/

edited Jun 7, 2012 at 4:30

answered Jun 7, 2012 at 2:15

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RobG Over a year ago

Note that IE 8 in quirks mode and IE 7 and lower do not have support for querySelector. Also there is no requirement in any standard for navtive methods to support host objects as their this object. So calling such methods on DOM objects (like the NodeList used here) can be expected to (and do) throw errors in conforming browsers. Try it in IE 8 and lower.

RobG Over a year ago

Also, this function only uncheckes the checked ones, it doesn't check the unchecked ones per the OP.

RobG Over a year ago

Keep trying, addEventListener is not supported by IE 8 and lower. And what feature test(s) are you planning to use to chose which version of the code to run?

Derek 朕會功夫 Over a year ago

@RobG - I hate IE! jQuery is my final weapon.

RobG Over a year ago

For those who have been programming for the web for some time, IE 8 (and even 7 and 6) is a snap compared to the days of IE 4 and NN4. :-)

|

RobG · Accepted Answer · 2012-06-07 03:15:49Z

0

You can collect checkboxes within a certain context (some contianer within the grid) and set their checked property to the opposite of whatever it currently is, so:

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;
  }
}

answered Jun 7, 2012 at 3:15

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Javascript to check if a dynamically created checkbox is checked on a dynamically created button click

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related