Check-boxes are useful for allowing the user to select multiple options when filling a HTML web form.
If the HTML Form is having large number of checkboxes, then selecting and de-selecting all the checkboxes will be difficult for the users. And, it will take significant amount of time.
So, we can provide separate button for allowing the users to select or de-select all the checkboxes by doing single click.
For providing above form, the HTML code will be as below
<form name="frmselectdeselectcheckbox" id="frmselectdeselectcheckbox" action="" method="post">
<input type="checkbox" name="selectdeselectcheckbox[]" id="selectdeselectcheckbox" value="1"/> Qualitypoint.blogspot.com <br>
<input type="checkbox" name="selectdeselectcheckbox[]" id="selectdeselectcheckbox" value="2"/> Qualitypointtech.com<br>
<input type="checkbox" name="selectdeselectcheckbox[]" id="selectdeselectcheckbox" value="3" /> Qualitypointtech.net <br>
<input type="button" name="selectall" value="Select All" onClick="SetAllCheckBoxes('frmselectdeselectcheckbox','selectdeselectcheckbox',true);">
<input type="button" name="clearall" value="Clear All" onClick="SetAllCheckBoxes('frmselectdeselectcheckbox','selectdeselectcheckbox',false);">
</form>
A javascript function "SetAllCheckBoxes" will be called in the onClick event of the Select All and Clear All buttons.
This javascript function should be added in the head section of the HTML file.
<script language="javascript" type="text/javascript">
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
</script>
More Articles...
You can bookmark this blog for further reading, or you can subscribe to our blog feed.
Shop at Rajamanickam.com | Birthday Gift Idea? | Hire me for $6 per Hour
Get 3 useful ebooks for Rs 99 in India and $5.99 globally
Get a 75% commission | ChatGPT and and Google Gemini for Beginners (Use Discount code QPT)
Thursday, February 25, 2010
Search This Blog
Art of Talking to AI | Tech eBook | Dream Big | Listen to Dream Big
Today's Deals | Timesheet | Products | 3 ebooks for $5.99 / Rs 99 | Earn 50% commission
About | Privacy | Follow | TOS | WhatsApp | Contact
I may earn a commission from Amazon affiliate links
Today's Deals | Timesheet | Products | 3 ebooks for $5.99 / Rs 99 | Earn 50% commission
About | Privacy | Follow | TOS | WhatsApp | Contact
I may earn a commission from Amazon affiliate links
No comments:
Post a Comment