Groups of Checkboxes with the Same Name

On this page we demonstrate and describe using JavaScript to handle a group of checkboxes that share the same name. We show how to obtain a reference to the group of checkboxes as well as how to reference individual checkboxes in the group to access properties and assign event handlers.

When grouping checkboxes and giving them each the same name, attach square brackets to the end of the name in order for server-side code to treat checked checkboxes as an array. Otherwise only the last checked item in the group would be available upon submission.

The form below demonstrates with a group of checkboxes named sports[]. The form provides a sports array to server-side code upon submission.

Demo: Checkboxes Sharing Same Name

Check the types of sports or fitness activities you engage in on a regular basis.

JavaScript with Same-Name Checkbox Group

You can obtain a reference to the checkboxes in the example above and obtain information about them in JavaScript as shown here:

// obtain reference to checkboxes named sports[]
var sports = document.forms['demoForm'].elements[ 'sports[]' ];

// number of checkboxes in group
alert( sports.length ); // 6

// value of 4th checkbox in node list
alert( sports[3].value ); // swimming

Our sports variable above contains an array-like list of element references referred to as a node list. Although node lists are not true arrays, you can access their length property and use array indexing to access individual items in the list as shown above.

You can loop through the list and attach an onclick handler to each checkbox with the following:

// using reference to sports obtained above
for (var i=0, len=sports.length; i<len; i++) {
    sports[i].onclick = doSomething;
}

// access properties of checkbox clicked using 'this' keyword
function doSomething() {
    if ( this.checked ) {
        // if checked ...
        alert( this.value );
    } else {
        // if not checked ...
    }
}

To find out more about accessing properties of the checkbox inside the function assigned onclick, see the Event Handler Properties Example. Or you could choose one of the other methods for attaching event handlers described and demonstrated in our JavaScript Event Handling tutorial.

Example Form Markup

The following displays the markup for the form above:

<form action="#" method="post" class="demoForm" id="demoForm">
    
    <fieldset>
        <legend>Demo: Checkboxes Sharing Same Name</legend>
    
    <p>Check the types of sports or fitness activities you engage in on a regular basis.</p>
    
    <p>
        <label><input type="checkbox" name="sports[]" value="cycling" /> cycling</label>
        <label><input type="checkbox" name="sports[]" value="running" /> running</label>
        <label><input type="checkbox" name="sports[]" value="visit gym" /> visit gym</label>
        <label><input type="checkbox" name="sports[]" value="swimming" /> swimming</label>
        <label><input type="checkbox" name="sports[]" value="team sports" /> team sport(s)</label>
        <label><input type="checkbox" name="sports[]" value="other" /> other</label>
    </p>
    
    </fieldset>
    
</form>

Back to top