js实现全选和反选

Original 2019-02-21 22:16:47 230
abstract:<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewp
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div{
            width:80px;
 height:150px;
 border:1px solid #ccc;
 margin:5px auto;
 }
        input{
            display:inline-block;
 margin:5px;
 }
    </style>
</head>
<body>
<div id="div">
    <input type="checkbox" name="items[]" id="checkAll" onclick="checkAll()"/><label for="checkAll">全选</label><br/>

    <input type="checkbox" name="items[]" id="java"/><label for="java">java</label><br/>

    <input type="checkbox" name="items[]" id="php"/><label for="php">php</label><br/>

    <input type="checkbox" name="items[]" id="html"/><label for="html">html</label><br/>

    <input type="checkbox" name="items[]" id="js"/><label for="js">js</label><br/>

    <input type="checkbox" name="items[]" id="css"/><label for="css">css</label><br/>
</div>
</body>
<script>
 function checkAll(){
        var checkAll = document.getElementById('checkAll');
 var items = document.getElementsByName('items[]');
 for(var i=0; i<items.length; i++){
            if(checkAll.checked){
                items[i].checked=true;
 }else{
                items[i].checked=false;
 }
        }
    }
</script>
</html>

代码显示效果如下:

QQ截图20190221221649.jpg

Correcting teacher:查无此人Correction time:2019-02-22 09:18:16
Teacher's summary:完成的不错。反选是不是还没完成,下次记得提交反选作业。继续加油。

Release Notes

Popular Entries