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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

 </head>

 <body>

 <form action="#" name="myform">

     <input type="radio" name="rad" value="A">A

     <input type="radio" name="rad" value="B">B

     <input type="radio" name="rad" value="C">C

     <input type="button" value="按钮" onclick="myform.rad[0].click()">

 </form>

 <form action="#" name="myform2">

     <input type="checkbox" name="boxc" value="A" onclick="return check()">A

     <input type="checkbox" name="boxc" value="B" onclick="return check()">B

     <input type="checkbox" name="boxc" value="C" onclick="return check()">C

     <input type="checkbox" name="boxc" value="D" onclick="return check()">D

 </form>

 <script>

     //alert(myform.rad.length)

     //alert(myform.rad[1].value)

     //myform.rad[1].defaultChecked=true

     //myform.rad[0].click()

     function check(){

         var num=0;

         var len=document.myform2.boxc.length;

         for(var i=0;i<len;i++){

             if(document.myform2.boxc[i].checked){

                 num++

             }

         }

         if(num>2){

             // document.myform2.boxc[num-1].checked=false;

             alert('最多只能选择三项')

             return false ;

         }

     }

 </script>

 </body>

 </html>