Sunday, October 19, 2008

How to select multiple check boxes?

Using java script it is possible to check/uncheck multiple check boxes at once in a page using a single "Select All" check box.
Checking/UnChecking this check box sets the status of the available Item check boxes.
(SelecT All check box which calls a specific funtion when user clicks on it)
Select All<input type="checkbox" id="chk_select_all" onclick="select_All_chks(this);" />

(Item check boxes which are to be checked/unchecked at once with the help of above "Select All" check box.

Select <input type="checkbox" id="chk_select1" title='Item'/>
Select <input type="checkbox" id="chk_select2" title='Item'/>
Select <input type="checkbox" id="chk_select3" title='Item'/>

//Function that gets called when user cliks on "Select All" Check box.
function select_All_chks(obj)
{
//Iterating through elements available in the current document whose tag name is "input".
for(var i=0;i<document.body.getElementsByTagName('input').length;i++)
{
//Condition if the items title is 'Item' (Item check boxes)
if(document.body.getElementsByTagName('input')[i].title=='Item')
{
//Setting the status of the item check boxes according to the "Select All" check box.
document.body.getElementsByTagName('input')[i].checked=obj.checked;
}
}
}

No comments: