Apps optimize

How to create an online form with multiple checkbox options

Ryan Boudreaux offers a quick demo of an online form that must include multiple sets of select options for checkboxes. Here he uses jquery and HTML to achieve the desired functionality.

A recent client project requiring an online submittal form with options for listing multiple sets of checkboxes, along with several "Select All" options within a certain container or section has prompted this demonstration utilizing the power of jQuery, which essentially toggles the select or not selected checkboxes within a given class.

The example you see in Figure A below (displayed in Chrome Version 24.0.1312.57 m) illustrates the use of multiple selection options for a list of the continents by region, with Select All options for each continent set, an option to Select All for all continents, as well as a Select All option for just the continents of Asia and Europe. This illustration is for demonstration purposes only, and there is no submit button.

Figure A

The HTML

A series of articles <article> each with their own id are nested within a main section <section> which has an id equals to "section". Each article contains its own continent with its associated regions, each with a checkbox and following the regions is the "Select All region name" checkbox, such as "Select All Africa".

The entire section element is contained within a <form> element with an action="", which is a dead action; if this was a real form, the action would either point to an email address or a database source. We are only demonstrating the jQuery functionality of the multiple checkbox selection options. First, make sure you call the jQuery library from within the <head> of the web page document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Next is the form code snippet which is contained within the <body> of the document:

<form action="" name="form">
<section id="section">
       <h2>Lists of continents by region</strong></h2>
       <article id="set1">
             <h3>Africa</h3>
             <label><input type="checkbox">Eastern Africa</label>&nbsp;
                <label><input type="checkbox">Middle Africa</label>&nbsp;
                <label><input type="checkbox">Northern Africa</label>&nbsp;
                <label><input type="checkbox">Southern Africa</label>&nbsp;
                <label><input type="checkbox">Western Africa</label> <br /><br />
                <label><input type="checkbox" id="set1all">Select All Africa</label>
    </article>
       <article id="set2">
             <h3>North and South America</h3>
             <label><input type="checkbox">Caribbean</label>&nbsp;
                <label><input type="checkbox">Central America</label>&nbsp;
                <label><input type="checkbox">Northern America</label>&nbsp;
                <label><input type="checkbox">South America</label> <br /><br />
                <label><input type="checkbox" id="set2all"> Select All Americas</label>
    </article>
       <article id="set3" class="both">
             <h3>Asia</h3>
             <label><input type="checkbox">Central Asia</label>&nbsp;
                <label><input type="checkbox">Eastern Asia</label>&nbsp;
                <label><input type="checkbox">South-Eastern Asia</label>&nbsp;
                <label><input type="checkbox">Southern Asia</label>&nbsp;
                <label><input type="checkbox">Western Asia</label> <br /><br />
                <label><input type="checkbox" id="set3all"> Select All Asia</label>
    </article>
       <article id="set4" class="both">
             <h3>Europe</h3>
             <label><input type="checkbox">Eastern Europe</label>&nbsp;
                <label><input type="checkbox">Northern Europe</label>&nbsp;
                <label><input type="checkbox">Southern Europe</label>&nbsp;
                <label><input type="checkbox">Western Europe</label> <br /><br />
                <label><input type="checkbox" id="set4all"> Select All Europe</label>
    </article>
       <article id="set5">
             <h3>Oceania and Antarctica</h3>
             <label><input type="checkbox">Australia & New Zealand</label>&nbsp;
                <label><input type="checkbox">Melanesia</label>&nbsp;
                <label><input type="checkbox">Micronesia</label>&nbsp;
                <label><input type="checkbox">Polynesia</label> &nbsp;
                <label><input type="checkbox">Antarctica & Southern Ocean islands</label> <br /><br />
                <label><input type="checkbox" id="set5all"> Select All Oceania</label>
    </article>
                     <br /> <br />
                           <label><input type="checkbox" id="set6all"> Select All Regions</label> <br /> <br />
                <label><input type="checkbox" id="set7all"> Select All Asia and Europe Regions</label>
</section>
</form>

The jQuery

The jQuery <script> calls are placed at the bottom of the web page document just before the closing </body> tag, and in this demonstration, includes the .click(function() for each of the checkbox options. Each set of regions input is set by the id for the article, and then the Select All option is set by another id, for example, in the first set for Africa, the article element has an id="set1": <article id="set1">. The "Select All" input is set by the id="set1all": <input type="checkbox" id="set1all">.

<!-- jQuery for seven sets of "Select All" checkboxes -->
<script>
    $(document).ready(function() {
             $('input[id="set1all"]').click(function() {
             $("#set1 :checkbox").attr('checked', $(this).attr('checked'));
        });
             $('input[id="set2all"]').click(function() {
             $("#set2 :checkbox").attr('checked', $(this).attr('checked'));
        })
             $('input[id="set3all"]').click(function() {
             $("#set3 :checkbox").attr('checked', $(this).attr('checked'));
        })
             $('input[id="set4all"]').click(function() {
             $("#set4 :checkbox").attr('checked', $(this).attr('checked'));
        })
             $('input[id="set5all"]').click(function() {
             $("#set5 :checkbox").attr('checked', $(this).attr('checked'));
             })
             $('input[id="set6all"]').click(function() {
             $("#section :checkbox").attr('checked', $(this).attr('checked'));
        })
        $('input[id="set7all"]').click(function() {
            $(".both :checkbox").attr('checked', $(this).attr('checked'));
        });
     });
</script>

For the option to select the sets of regions for both Asia and Europe, "Select All Asia and Europe Regions", the articles for these also have a class equals "both", for Asia, <article id="set3" class="both">, and for Europe, <article id="set4" class="both">.

The index.html and styles.css associated with this demonstration are available for download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
heidi.sandoval
heidi.sandoval

Looking forward to working on some forms for my small business this weekend.

sigilToNoise
sigilToNoise

I wonder if you would have more flexibility if the checkbox elements were dynamically generated at page load. You could have a data source (e.g. the site's database, or an XML file) holding all the names of checkboxes and which article ID each one is associated with, and then for each ID-checkbox pair generate a checkbox with some javascript like so: function addCheckboxToForm(articleID,checkboxName) { var checkBox = document.CreateElement("input"); checkBox.type = "checkbox"; checkBox.name = articleID.concat("_",checkboxName); var content = document.GetElementById(articleID) content.appendChild(checkBox); } That way if you have to add or remove some names from the database, you don't have to change the HTML.