How to run through each checked checkbox with a classname using JavaScript without jQuery - Stack Overflow

admin管理员组

文章数量:1241157

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

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

I'm trying to run through all the checkboxes on a page with class = 'checkbox' - the client doesn't want to use jQuery, so I need an alternative for the above.

I'm hoping I can avoid writing a long function from scratch to do this and simply use something built-in to JavaScript, but it's looking like it's not possible.

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

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

I'm trying to run through all the checkboxes on a page with class = 'checkbox' - the client doesn't want to use jQuery, so I need an alternative for the above.

I'm hoping I can avoid writing a long function from scratch to do this and simply use something built-in to JavaScript, but it's looking like it's not possible.

• javascript
• jquery

Share Improve this question Follow edited Oct 24, 2011 at 16:29 dlamblin 45.4k2222 gold badges104104 silver badges144144 bronze badges asked Oct 24, 2011 at 16:20 korbenkorben 53711 gold badge77 silver badges1818 bronze badges 9

• 1 If we could do something as simple as this without JQuery, why would we have JQuery. – musefan Commented Oct 24, 2011 at 16:22
• 1 @musefan customers don't always listen to arguments of sanity. – JaredPar Commented Oct 24, 2011 at 16:26
• @JaredPar: I disagree... that should say "never" ;) – musefan Commented Oct 24, 2011 at 16:27
• 1 @musefan -- doxdesk./img/updates/20091116-so-large.gif ^_^ – Naftali Commented Oct 24, 2011 at 16:28
• 1 i'm very satisfied with the answers below, i wasn't being sarcastic. it's not practical to post all the relevant code for this issue, it's quite large, but i appreciate the offer of your continued assistance – korben Commented Oct 24, 2011 at 16:51

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 5

Many older browsers don't support querySelectorAll or getElementsByClassName, so you'd have to loop over all <input> elements in those browsers. It's always best to check for those functions first, though.

Secondly, you should never use $(this).is(":checked") — not even in jQuery — it's a very slow path to take when looking for this.checked.

This should get you going:

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 example above, you can change the value of base to any element. This means that, if all these elements have a mon parent or ancestor node, you can set that element as the base and it should run faster, e.g:

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

var checkboxes = document.getElementsByClassName('checkbox');

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

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

Try the following

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

JavaScript has built-in methods for getting DOM elements by ID, or by tag name, but selecting by class isn't supported in older versions of IE. However, it would be fairly fast to obtain all inputs and test 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 test if their class is "checkbox", but this gets plicated if they have more than one class. If they don't:

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

It's kind of browser dependent then. But with a modern browser you'd use document.getElementsByClassName('checkbox') to get an array that you'd iterate through, then is(':checked') bees the more mon if(array[i].checked){}.

Feel free to read about the patible browsers. You'll find that it doesn't work in Internet Explorer 5.5, 6, and 7.

I think jQuery works around this in sizzle about here.

So it might look like:

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('*') doesn't work with Internet Explorer 5.5.

本文标签： How to run through each checked checkbox with a classname using JavaScript without jQueryStack Overflow