在网页中经常有一些复选框给用户进行选择,或者投票等。但是有的时候我们可能只允许用户选择几项,如只允许选择两项,不允许多选,那么这时候就要控制checkbox复选框的最大可选项了,下面就简单介绍这个方法。
此方法的最终效果如下图如示:
这里只允许最多选择2项,当选择到2项时,其他项自动改变为不可用状态,即灰色,用户无法选择。你也可以自己根据情况设置为最多选择3项等,相关源代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用JavaScript限制checkbox复选框最大可选项的方法-HTMer.Com</title> <script language="javascript" type="text/javascript"> var checkedFlag = 0; var checkMax = 2; //这里为最多可选项数量,2表示最多可选2个,改成3表示最多可选3个 function checkbox(checkbox) { var obj = document.getElementsByName("checkbox"); if (checkbox.checked && checkedFlag <= checkMax - 1) { checkedFlag ++ ; if (checkedFlag == checkMax) { for (var i = 0; i < obj.length; i ++ ) { if( ! obj[i].checked)obj[i].disabled = true; } } } else if ( ! checkbox.checked) { for (var j = 0; j < obj.length; j ++ ) { if( ! obj[j].checked)obj[j].disabled = false; } checkedFlag -- ; } } function htmer_chkbox() { var obj = document.getElementsByName("checkbox"); for (var i = 0 ; i < obj.length ; i ++ ) { if (obj[i].checked || obj[i].disabled) { obj[i].checked = false; obj[i].disabled = false; } } } </script> </head> <body onLoad="htmer_chkbox();"> 请选择(最多可选2项)<br /> htmer1 <input type="checkbox" value="1" name="checkbox" onClick="checkbox(this);"/> htmer2 <input type="checkbox" value="2" name="checkbox" onClick="checkbox(this);"/> htmer3 <input type="checkbox" value="3" name="checkbox" onClick="checkbox(this);"/> htmer4 <input type="checkbox" value="4" name="checkbox" onClick="checkbox(this);"/> htmer5 <input type="checkbox" value="5" name="checkbox" onClick="checkbox(this);"/> </body> </html>