How to skip each checked tick with class name using JavaScript without jQuery

Question

Is there an immediate equivalent in javascript for below jquery code?

$('.checkbox').each(function() { if ($(this).is(':checked')) { //logic here } }); 

I am trying to run all the checkboxes on the page using class = 'checkbox' - the client does not want to use jQuery, so I need an alternative for the above.

I hope that I can avoid writing a long function from scratch to do this, and just use something built-in for JavaScript, but it seems like it's impossible.

Answer 1

Many older browsers do not support querySelectorAll or getElementsByClassName , so you will have to querySelectorAll over all the <input> elements in these browsers. However, it is always better to test these features.

Secondly, you should never use $(this).is(":checked") - not even in jQuery - this is a very slow way to find this.checked .

This should make you:

 var base = document, inps, tmp, i = 0, reg = /\bcheckbox\b/; // getElementsByClassName is the fastest method if (base.getElementsByClassName) inps = base.getElementsByClassName("checkbox"); // Followed by querySelectorAll else if (base.querySelectorAll) inps = base.querySelectorAll(".checkbox"); // But if neither exist, loop through all the elements and check the class else { inps = []; var tmp = base.getElementsByTagName("input"); i = tmp.length; while (i--) { if (reg.test(tmp[i].className) inps.push(tmp[i]); } } // Finally, loop through the matched elements and apply your logic i = inps.length; while (i--) { var current = inps[i]; if (current.checked) { // logic here } } 

In the above example, you can change the base value to any element. This means that if all these elements have a common parent or ancestor node, you can set this element as a base, and it should work faster, for example:

 var base = document.getElementById("myForm"); 

Answer 2

 var checkboxes = document.getElementsByClassName('checkbox'); for(var i = 0; i < checkboxes.length; i++){ if(checkboxes[i].checked){} else {} } 

See comments below. you can use getElementsByTagName for older versions of IE and other older browsers.

Answer 3

Try to execute

 var all = document.getElementsByClassName('checkbox'); for (var i = 0; i < all.length; i++) { var current = all[i]; if (current.checked) { // Logic here } } 

Answer 4

It depends on the browser. But with a modern browser, you would use document.getElementsByClassName('checkbox') to get the array you would try, and then is(':checked') will become more common if(array[i].checked){} .

Feel free to read about compatible browsers . You will find that it does not work in Internet Explorer 5.5, 6, and 7.

I think jQuery works around this in sizzle about here .

So it might look like this:

 var allCheckbox; if (document.getElementsByClassName) { allCheckbox = document.getElementsByClassName('checkbox'); } else { allCheckbox = new Array(); var i = 0; var all = document.getElementsByTagName('*') { for (var j=0; j < all.length; j++) { //Comparison cribbed from sizzle if ((" " + (all[j].className || all[j].getAttribute("class")) + " ") .indexOf('checkbox') > -1 ) { allCheckbox[i++] = all[j]; } } } for (var i = 0; i < allChecked.length; i++) { if (allChecked[i].checked) { // Logic here } } 

Final note: getElementsByTagName ('*') does not work with Internet Explorer 5.5.

Answer 5

JavaScript has built-in methods for retrieving DOM elements by ID or tag name, but class selection is not supported in older versions of IE . However, it would be pretty quick to get all the input and check them for the checkbox type:

 var x=document.getElementsByTagName("input"); for (var i=0; i<x.length; i++) { if (x[i].type === "checkbox" && x[i].checked) { // do something } } 

You can also check if their class is a “flag”, but it gets complicated if they have more than one class. If they do not:

 var x=document.getElementsByTagName("input"); for (var i=0; i<x.length; i++) { if (x[i].className === "checkbox" && x[i].checked) { // do something } }