|
|
select all checkboxes
This is a very useful procedure to implement, and is fairly simple to understand. In working with forms, you’ll no doubt need to include this in at least one page if you have a large amount of options to select or if you work with long lists. An example of this functionality is the Yahoo Mail option to select all email messages for deletion or moving. The checked=true value is used to check all of the check boxes within that one form. It is important to realize that this will work only if you’re using a single form (of any size). If you have more than one form to submit on the same page with this functionality you’ll have to provide an entirely separate checked=true statement within a different function.
<html>
<head>
<script type="text/javascript">
function makeCheck(thisForm) {
for (i = 0; i < thisForm.option.length; i++) {
thisForm.option[i].checked=true;
}
}
function makeUncheck(thisForm) {
for (i = 0; i < thisForm.option.length; i++) {
thisForm.option[i].checked=false;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="Check" onclick="makeCheck(this.form)">
<input type="button" value="Uncheck" onclick="makeUncheck(this.form)">
<input type="checkbox" name="option">Apples<br>
<input type="checkbox" name="option">Oranges<br>
<input type="checkbox" name="option">Bananas<br>
<input type="checkbox" name="option">Melons
</form>
</body>
</html>
You may use a type=submit button to check all boxes and submit at the same time if you like. This is usually used in the case of having trained employees who are using the form over many times on an Intranet or private Internet page. They know that the form will be submitted with all boxes being checked. An Internet page that the user visits only once shouldn’t have this functionality, as the user may not completely understand what just happened simply because they’ve never used that particular form before.
| |
