资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
判断checkbox选择的个数 多浏览器
就是不能让用户选择超过5个checkbox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20ii%20%3D%200%3B%20%0D%0Afunction%20boxnum()%7B%20%0D%0A%20%20%20%20var%20box%20%3D%20document.getElementsByName(%22c%22)%3B%20%20%20%20%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3Cbox.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20box%5Bi%5D.onclick%20%3D%20function%20chk()%7B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20if(this.checked%20%26%26%20ii%20%3C%3D%205)%20ii%20%2B%3D%201%3B%20%0D%0A%20%20%20%20%20%20%20%20if(!%20this.checked)%20ii%20-%3D%201%3B%20%0D%0A%20%20%20%20%20%20%20%20if(ii%3E5)%7B%20ii%20-%3D1%3B%20this.checked%20%3D%20false%3Balert('%E6%9C%80%E5%A4%9A%E4%B8%8D%E8%83%BD%E8%B6%85%E5%A4%9A5%E4%B8%AA%E4%B8%BB%E8%90%A5%E9%A1%B9%E7%9B%AE%EF%BC%81%E8%AF%B7%E9%87%8D%E6%96%B0%E9%80%89%E6%8B%A9%EF%BC%81')%3B%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0Awindow.onload%20%3D%20boxnum%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </head> <body> <table cellspacing="0" border="1" width="200" > <tr> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> </tr> <tr> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> <td><input type="checkbox" name="c"></td> </tr> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
第二种方法
<!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>无标题文档</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%0D%0Afunction%20boxnum(obj)%7B%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20checknum()%7B%20%0D%0Avar%20e%2CsrcE%20%0D%0A%20%20e%3Dwindow.event%3Fwindow.event%3Ae%3B%20%20%0D%0A%20%20srcE%3De.srcElement%3Fe.srcElement%3Ae.target%3B%20%20%0D%0A%20%20if(!srcE)return%3B%20%20%0D%0Aif(String(srcE.tagName).toLowerCase()!%3D%22input%22%7C%7CString(srcE.type).toLowerCase()!%3D%22checkbox%22)return%3B%20%0D%0Avar%20box%20%3D%20document.form1.elements%5B'checkbox3'%5D%3B%20%0D%0A%20%20%20%20var%20ii%20%3D%200%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3Cbox.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(box%5Bi%5D.checked)%7Bii%2B%2B%3B%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if(ii%3E5)%7B%20%0D%0A%20%20%20%20%20%20%20%20alert('%E6%9C%80%E5%A4%9A%E4%B8%8D%E8%83%BD%E8%B6%85%E5%A4%9A5%E4%B8%AA%E4%B8%BB%E8%90%A5%E9%A1%B9%E7%9B%AE%EF%BC%81%E8%AF%B7%E9%87%8D%E6%96%B0%E9%80%89%E6%8B%A9%EF%BC%81')%3B%20%0D%0A%20%20%20%20%20%20%20%20srcE.checked%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Adocument.onkeydown%3Ddocument.onchange%3Ddocument.onclick%3Dchecknum%3B%20%20%0D%0A%3C%2Fscript%3E"> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="520" height="221" border="1"> <tr> <td><label> <input type="checkbox" name="checkbox3" value="checkboxa" /> 1 <input type="checkbox" name="checkbox3" value="checkboxaa" /> 2 <input type="checkbox" name="checkbox3" value="checkboxaaa" /> 3 <input type="checkbox" name="checkbox3" value="checkboxaaaa" /> 4 <input type="checkbox" name="checkbox3" value="checkboxcv" /> 5 <input type="checkbox" name="checkbox3" value="checkboxcvb" /> 6 <input type="checkbox" name="checkbox3" value="checkboxcvbcvb" /> 7 <input type="checkbox" name="checkbox3" value="checkboxcvbcvbcv" /> 8 <input type="checkbox" name="checkbox3" value="checcvb" /> 9 <input type="checkbox" name="checkbox3" value="checvb" /> 10 <input type="checkbox" name="checkbox3" value="chcvbox" /> <input type="checkbox" name="checkbox3" value="chcvbcvbox" /> <input type="checkbox" name="checkbox3" value="ccvbcvbcvox" /> </label></td> <td> </td> <td> </td> </tr> <tr> <td><input type="button" name="Submit" value="按钮" onclick="boxnum('checkbox3')" /></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </form> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
上面的只能在IE下运行
支持多浏览器的方法
<form method="post" action="" name="form1" id="form1"> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> </form> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20%20%20var%20m_count%20%3D%200%3B%20%0D%0A%20%20%20%20document.getElementById(%22form1%22).onclick%20%3D%20function(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20ele%20%3D%20(document.all)%3Fwindow.event.srcElement%3Ae.target%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(ele.nodeName.toLowerCase()%3D%3D%22input%22%20%26%26%20ele.type.toLowerCase()%3D%3D%22checkbox%22%20%26%26%20ele.checked)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20m_count%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(ele.nodeName.toLowerCase()%3D%3D%22input%22%20%26%26%20ele.type.toLowerCase()%3D%3D%22checkbox%22%20%26%26%20!ele.checked)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20m_count--%3B%20%0D%0A%20%20%20%20%20%20%20%20if(m_count%3E5)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20m_count--%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20alert(%22%E6%9C%80%E5%A4%9A%E4%B8%8D%E8%83%BD%E8%B6%85%E5%A4%9A5%E4%B8%AA%E4%B8%BB%E8%90%A5%E9%A1%B9%E7%9B%AE%EF%BC%81%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%3C%2Fscript%3E">
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程