JS全选案例和总结

Original 2018-12-26 17:48:46 240
abstract:<!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&quo

<!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=utf-8" />

<title>全选</title>

<style type="text/css">

.box{

width: 120px;

height: 250px;

border: 1px solid #CCC;

border-radius: 5px;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 0px;

padding-left: 0px;

margin-top: 20px;

margin-right: auto;

margin-bottom: auto;

margin-left: auto;

}


.box div{

border-bottom-style: solid;

border-bottom-width: 1px;

border-bottom-color: #F00;

padding-bottom: 10px;

}


.box input{

margin: 8px;

}

</style>


<script type="text/javascript">

  function checkAll(){

  var checkall,item;

  checkall=document.getElementById("checkall")

  item=document.getElementsByName('item[]')

  for(var i=0;i<item.length;i++){

  if(checkall.checked){

  item[i].checked=true

  } else{

  item[i].checked=false}

  

  }

  }


</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>


<!--总结

for 循环语句

如果一遍又一遍的运行相同的代码,并且每次的值都不同,可以用for语句


for( var i=0;i<item.length;i++){

item[i].checked=ture

}


条件语句

if..else  当条件为ture时执行代码,当条件为false时执行其他代码

if(checkall.checked){item[i].checked=true}

else{item[i].checked=false}


document.getElementById('') 

document.getElementsName("")

->




Correcting teacher:灭绝师太Correction time:2018-12-27 09:26:28
Teacher's summary:完成的不错!继续加油哟!有案例有分析是个很好的习惯!

Release Notes

Popular Entries