Utilisateur:Toto
<body onload="blogInitPage();">
<a href="http://www.somacon.com/"><img class="noprint" src="p516.php" alt="Somacon.com: Articles on web development, software, and hardware" height="16" width="728" border="0"></a><script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
§ <a class="bc" href="/">Home</a> > <a class="bc" href="p385.php">Index</a> > <a class="bc" href="p385.php?cat=Web+Development">Web Development</a>
Sommaire
Javascript Function to Check or Uncheck all Checkboxes
This Javascript function will check or uncheck all the checkboxes in an HTML form.
This function is specially designed for dynamic pages with varying numbers of checkboxes. Unlike other functions out there, it will work without error even if there are no checkboxes or there is only one checkbox. It is also significantly faster for long lists, because it saves the length of the checkbox in a variable, instead of recalculating it in the loop. Finally, the function is granted to the public domain--use it as you wish.
Instructions
Provide the form name and the field name of the checkbox as the parameters to the function. Then specify true or false as the CheckValue, depending on if you want to check or uncheck all the checkboxes, respectively. The function simply returns without doing anything if the checkboxes do not exist, so make sure you enter the correct FormName and FieldName. Remember, unlike HTML, Javascript form and field names are case-sensitive!
JavaScript Source Code
<code>
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;
}
</code>
Example
Use your browser's view source command to see how the buttons below work to select or unselect all the checkboxes. Also note how we used the HTML label tag to make the whole text clickable. Everybody should use labels because clicking on the text is much easier for people than clicking on a small checkbox.
<form method="GET" action="page17.php" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears </label>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff </label>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore </label>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">
</form>