Generally in the checkbox, we have two different type of checkboxes one are plain checkboxes and the second one are checkbox array. The javascript for both differs a lot. The default checkbox script will be very simple to write and can be found any where in the net. The checkbox array scripts would be difficult.
The below example would define how to write a javascript for a checkbox array.
<html>
<head>
<script language="javascript">
function checkarray(form) {
var total = 0;
var max = document.form.elements['gender[]'].length;
for (var idx = 0; idx<max; idx++) {
if(document.form.elements['gender[]'][idx].checked==true)
{
if(document.form.elements['gender[]'][idx].value=="any")
{
for (var idx1 = 0; idx1<max; idx1++) {
document.form.elements['gender[]'][idx1].checked=true;
}
}
}else{
if(document.form.elements['gender[]'][idx].value=="any")
{
for (var idx1 = 0; idx1<max; idx1++) {
document.form.elements['gender[]'][idx1].checked=false;
}
}
}
}
}
function checkarray1(form) {
var total = 0;
var max = document.form.elements['gender[]'].length;
for (var idx = 0; idx<max; idx++) {
var cc=0;
if(document.form.elements['gender[]'][idx].checked==true)
{
if(document.form.elements['gender[]'][idx].value=="any")
{
cc=1;
}
}else{
if(document.form.elements['gender[]'][idx].value=="m")
{
document.form.elements['gender[]']['0'].checked=false;;
}
if(document.form.elements['gender[]'][idx].value=="f")
{
document.form.elements['gender[]']['0'].checked=false;;
}
}
}
}
</script>
</head>
<body>
<table class="right_linksr" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="middle" width="10%" align="left"><label>
<input size="5" name="gender[]" onclick="checkarray(this.form)" value="any" type="checkbox">
</label></td>
<td valign="middle" width="90%" align="left">Any Gender</td>
</tr>
<tr>
<td valign="middle" width="10%" align="left"><input name="gender[]" onclick="checkarray1(this.form)" value="f" type="checkbox"></td>
<td valign="middle" width="90%" align="left">Female</td>
</tr>
<tr>
<td valign="middle" width="10%" align="left"><input name="gender[]" onclick="checkarray1(this.form)" value="m" checked="checked/" type="checkbox"></td>
<td valign="middle" width="90%" align="left">Male</td>
</tr>
</tbody></table>
</body>
</html>
Here we have two javascripts function used. One function checkarray() selects all the checkboxes and the function checkarray1() unselects the any checkbox if any of the another checkbox is selected.
No comments:
Post a Comment