javascript - Trigger event when any checkbox is checked/unchecked

Question

In my HTML, I have a lot of checkboxes.

<input type="checkbox"> Check me! 
<input type="checkbox"> Check me as well!
<input type="checkbox"> Check me too! 
<input type="checkbox"> This is a checkbox.
<input type="checkbox"> It is not a radio button.  
<input type="checkbox"> Just saying.  

(Even more checkboxes ..............)

Without jQuery, how do I create an alert once any checkbox in the document is changed?

(With so many checkboxes, it will be very troublesome to add onclick="alert('Hello!');" on every single checkbox.)

beeglebug · Accepted Answer · 2014-04-10 08:42:08Z

9

This is how you would do it without jQuery:

// get all the checkboxes on the page
var checkboxes = document.querySelectorAll('input[type=checkbox]');

// add a change event listener
for(var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', function(){
        console.log('the checkbox changed');
    });
}

Note: document.querySelectorAll is not supported in IE7 or below.

http://caniuse.com/queryselector

answered Apr 10, 2014 at 8:42

beeglebug

3,5421 gold badge25 silver badges40 bronze badges

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

Comments

Teemu · Accepted Answer · 2014-04-10 08:55:13Z

2

Clicks are bubbling through the document, you could use a single eventlistener for the parent element of these inputs. Something like this:

<form id="form">
    <input type="checkbox"> Check me!
    <input type="checkbox"> Check me as well!
    <input type="checkbox"> Check me too!
    <input type="checkbox"> This is a checkbox.
    <input type="checkbox"> It is not a radio button.
    <input type="checkbox"> Just saying.
</form>

JS:

document.getElementById('form').addEventListener('click', function (e) {
    if (e.target.type === 'checkbox') {
        alert('Checkbox');
    }
});

If you don't have a form or any other common parent element (and you don't want to add a one), you can add the listener to the document as well.

A live demo at jsFiddle.

edited Apr 10, 2014 at 8:55

answered Apr 10, 2014 at 8:42

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

Comments

Dipali Vasani · Accepted Answer · 2014-04-10 09:03:00Z

you can do like this :

HTML:

<form id="form">
    <input type="checkbox" name="checkbox" /> Check me!
        <input type="checkbox" name="checkbox"/> Check me as well!
        <input type="checkbox" name="checkbox"/> Check me too!
        <input type="checkbox" name="checkbox"/> This is a checkbox.
        <input type="checkbox" name="checkbox"/> It is not a radio button.
        <input type="checkbox" name="checkbox"/> Just saying.
</form>

JS:

var cbobject= document.forms[0].elements.checkbox;
for (var i=0, len=cbobject.length; i<len; i++) {
        if ( cbobject[i].type === 'checkbox' ) {
            cbobject[i].onclick = show_alert;
        }
    }
function show_alert(e){
    alert("checkbox!!!")
}

DEMO:

Collectives™ on Stack Overflow

javascript - Trigger event when any checkbox is checked/unchecked

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related