微信扫一扫打赏支持

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>

 

 

 

 

 

 

 

 

 

 
 
posted @ 2018-06-11 23:29  范仁义  阅读(1075)  评论(0)  编辑  收藏  举报