用while 做了一个多选

Original 2019-02-26 17:21:26 281
abstract:<!DOCTYPE html><html><head> <title>全选</title> <style type="text/css"> .box{width:120px;heiht:250px;border:1px solid #000;border-radius: 5px;padding:5px 10

<!DOCTYPE html>

<html>

<head>

<title>全选</title>

<style type="text/css">

.box{width:120px;heiht:250px;border:1px solid #000;border-radius: 5px;padding:5px 10px;margin:20px auto;}

.box div{border-bottom:1px solid #000;padding-bottom:10px;margin-bottom:8px;}

.box input{margin:8px;}


</style>

<script type="text/javascript">

function checkAll(){

var checkall,item,i=0;

checkall=document.getElementById('checkall')//获取全选

item=document.getElementsByName("item[]")//获取下面的勾选框

//alert(111)

//var s=item[].length

while(i<item.length){

    //alert(111)

          

           //document.write(i)

            

       if(checkall.checked){

item[i].checked=true;//当全选被选中,下边勾选框被选中

}else{


item[i].checked=false;

}

i++;

}


  }

</script>

</head>

<body>

<div class="box">

<div><input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label></div>

<input type="checkbox" name="item[]">选项1<br/>

<input type="checkbox" name="item[]">选项2<br/>

<input type="checkbox" name="item[]">选项3<br/>

<input type="checkbox" name="item[]">选项4<br/>

<input type="checkbox" name="item[]">选项5<br/>

<input type="checkbox" name="item[]">选项6<br/>



</div>



</body>

</html>

刚开始把i++放错地方了结果造成下边的选矿少了一个,第二个少了一个括号,出现错误,习惯写东西之前先alert()一下看看是否调用成功,要是再多几个案例就好了

Correcting teacher:灭绝师太Correction time:2019-02-27 09:14:30
Teacher's summary:需要案例练习的话可以看下选修课中的前端案例大全,

Release Notes

Popular Entries