Toggling Email style Checkboxes
Web-based Email type Selection of multiple check boxes with single check box toggle
This example explains how we can easily select multiple checkboxes by selecting a single checkbox.
Remember your mailbox? Yes, you select a checkbox and all the checkboxes in the array that follows are selected. Well, this is an example of task-centred design. The user need not select all the mails that he wants to delete one by one, but check just one checkbox to trigger them all.
Similarly, we can use the following to choose all books from a shopping cart that we intend to buy, rather than pick them one by one. All said and done, let's get started with the raw example.
Functionality:
1. By default all checkboxes will be checked.
2. Under Collections group when “Search All Collections” checkbox is checked all its collections are checked.
3. When “Search All Collections” checkbox is unchecked means all its collections are unchecked.
4. When any one collection is unchecked then the “Search All Collections” checkbox should be unchecked.
5. When all collections are checked then “Search All Collections” checkbox will be checked.
Loading the JavaScript
The JavaScript code has to be included in the <head> of the HTML Example page, below is the code which has to be included in <head> part.
<script type="text/javascript" language="javascript">
//Function to check and uncheck all the collections under Collections group
function unchk()
{
//Chceking for “Search All Collections” is unchecked
if (document.formMultiCheck.All.checked == false)
{
//If “Search All Collections” is unchecked, this code makes all the collections under it uncheck
for (i=0; i<document.formMultiCheck.Collections.length; i++)
document.formMultiCheck.Collections[i].checked = false
}
//Chceking for “Search All Collections” is checked
if (document.formMultiCheck.All.checked == true)
{
//If “Search All Collections” is checked, this code makes all the collections under it checked
for (i=0;i<document.formMultiCheck.Collections.length;i++)
document.formMultiCheck.Collections[i].checked = true
}
}
//Function to check the state of individual collection and its effect on “Search All Collections” check box
function chk()
{
for (i=0;i<document.formMultiCheck.Collections.length;i++)
//If any collection is unchecked it will change the state of “Search All Collections” check box to unchecked, this is achieved by “return” statement.
if (document.formMultiCheck.Collections[i].checked == false)
{
document.formMultiCheck.All.checked = false
return
}
for (i=0;i<document.formMultiCheck.Collections.length;i++)
//If all collection are checked, it will change the state of “Search All Collections” check box to checked.
if (document.formMultiCheck.Collections[i].checked == true)
{
document.formMultiCheck.All.checked = true
}
}
</script>
posted by Uday at 11:25 PM
2 comments
Email post
