表单全选11

Original 2019-03-24 20:59:22 231
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box{width:100px;height:200px;border:1px so

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

#box{

width:100px;

height:200px;

border:1px solid #000;

margin:50px auto;

padding:10px;


}

#box div{

border-bottom:1px solid #000;

padding-bottom:10px;

}

</style>


</head>

<body>

<div id="box">

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

<input type="checkbox" name="item"><label>项目1</label><br>

<input type="checkbox" name="item"><label>项目1</label><br>

<input type="checkbox" name="item"><label>项目1</label><br>

<input type="checkbox" name="item"><label>项目1</label><br>

<input type="checkbox" name="item"><label>项目1</label><br>

<input type="checkbox" name="item"><label>项目1</label><br>

</div>

<script type="text/javascript">

    function checkAll(){

     var checkall=document.getElementById('checkall');

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

</html>


Correcting teacher:查无此人Correction time:2019-03-25 09:29:36
Teacher's summary:完成的不错。js操作可以让页面动起来,你现在应该越学越开心。继续加油

Release Notes

Popular Entries