input全选

Original 2019-05-21 11:30:35 227
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>全选</title>

<style type="text/css">

.box{width: 100px;height: 200px;border: 1px solid #ccc;border-radius: 6px; margin:20px auto;}

.box div{border: 1px solid #aaa;border-radius: 6px; margin:20px auto;}

.box  input{border: 1px solid #fff;border-radius: 6px; margin:20px auto;}

</style>

<script type="text/javascript">

function checkall(){


var checkall,item;

checkall=document.getElementById("check_all");

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>

<body>

<div class="box"></div>

<div>

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

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


Correcting teacher:查无此人Correction time:2019-05-22 09:16:01
Teacher's summary:完成的不错。如果是商城的购物车,全选还要统计商品总价。继续加油。

Release Notes

Popular Entries