js进阶 9-15 多选框如何限制选中数目
js进阶 9-15 多选框如何限制选中数目
一、总结
一句话总结：
1、多选框如何限制选中数目？
没点击选择一次，来统计现在总共选了多少个，如果超出，就给onclick事件返回false，取消onclick事件
2、如何取消已经点击的click事件？
给onclick中返回一个false，onclick="return check()"
3、多选框最常用的属性是什么？
checked
二、js进阶 9-15 多选框限制选中数目
1、案例说明：
多选框限制选中数目
2、相关知识：单选和复选框
通常使用input元素来创建单选和复选框，的属性和方法相同，两者属性和方法相同，具有input元素共有的其他属性和方法。
属性
- 属性：id/form/name/type/disabled.......
- Checked 设置或返回 checkbox 是否应被选中
- defaultChecked 返回 checked 属性的默认值。
方法
- click() 模拟在 checkbox 中的一次鼠标点击。
- blur()、focus()
3、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 </head> 7 <body> 8 <form action="#" name="myform"> 9 <input type="radio" name="rad" value="A">A 10 <input type="radio" name="rad" value="B">B 11 <input type="radio" name="rad" value="C">C 12 <input type="button" value="按钮" onclick="myform.rad[0].click()"> 13 </form> 14 <form action="#" name="myform2"> 15 <input type="checkbox" name="boxc" value="A" onclick="return check()">A 16 <input type="checkbox" name="boxc" value="B" onclick="return check()">B 17 <input type="checkbox" name="boxc" value="C" onclick="return check()">C 18 <input type="checkbox" name="boxc" value="D" onclick="return check()">D 19 </form> 20 <script> 21 //alert(myform.rad.length) 22 //alert(myform.rad[1].value) 23 //myform.rad[1].defaultChecked=true 24 //myform.rad[0].click() 25 26 function check(){ 27 var num=0; 28 var len=document.myform2.boxc.length; 29 for(var i=0;i<len;i++){ 30 if(document.myform2.boxc[i].checked){ 31 num++ 32 } 33 } 34 if(num>2){ 35 // document.myform2.boxc[num-1].checked=false; 36 alert('最多只能选择三项') 37 return false ; 38 } 39 40 } 41 </script> 42 43 </body> 44 </html>
