Toggling Email style Checkboxes

2006-02-26T23:25:00.000-08:00

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>

Technorati tags: JavaScript, web2.0, ajax, checkbox, programming, design, task-centric, toggle

Toggle Button

2006-02-16T08:09:00.000-08:00

Want to make a toggle button? Eat this:

Here is a simple toggle button using JavaScript, it is like an on/off switch. Using this button you can enable or disable the select field(you can use any element).

Check the Example

How does it work(Or what your PM wants you to do)?

When you click on the button it should make the input/select field disabled or enabled.

Button value(the text that appears on the button) should be changed to enabled when the input/select field is disabled and vice versa.

Loading the JavaScript

The JavaScript code has to be included in the <head> of the html page, below is the code which has to be included in <head> tag.


<script type="text/javascript">

function toggle()
{
//Checking if select field is enabled
if (document.getElementById("mySelect").disabled == false)
{
//Changing the select field state to disabled and changing the value of button to enable
document.getElementById("mySelect").disabled = true
document.getElementById("btn").value="Enable list"
return
}
//Checking if select field is disabled
if (document.getElementById("mySelect").disabled == true)
{
//Changing the select field state to enabled and changing the value of button to disable
document.getElementById("mySelect").disabled = false
document.getElementById("btn").value="Disable list"
return
}
}
</script>

Html Code

Create a select field and a button in body section, below is the code which has to be included in <body> tag.


<form>
<select id="mySelect">
   <option>Apple</option> 
   <option>Pear</option>
   <option>Banana</option>
   <option>Orange</option>  
</select>
<input id="btn" onclick="toggle()" value="Disable list" type="button">
</form>

Hope you like the stuff. More to come your way! Stay tuned.

Code Cooking

Toggling Email style Checkboxes

Toggle Button