js实现全选效果实例

原创 2019-02-16 15:47:36 276
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>全选</title>    <style>    h3{width: 100%;text

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>全选</title>

    <style>

    h3{width: 100%;text-align: center;color: red;}

    .buy{width: 300px;height: 300px;  border: 1px solid #ccc;margin: 0 auto;}

    .buy div{height:30px;padding:10px 0px;border-bottom: 1px solid #ddd;line-height: 30px;}

    .buy input{margin: 10px;}

    </style>

    <script>

    function cheackAll(){

    var cheackall = document.getElementById('cheackall')

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

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

        if(cheackall.checked){

        item[i].checked=true;

        }else{

        item[i].checked=false;

        }

        }

    }

    </script>

</head>

<body>

<h3>购物车</h3>

<div>

<div>

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

</div>

<input type="checkbox" name="item[]">手机<br>

<input type="checkbox" name="item[]">电脑<br>

<input type="checkbox" name="item[]">电视<br>

<input type="checkbox" name="item[]">冰箱<br>

<input type="checkbox" name="item[]">洗衣机<br>

<input type="checkbox" name="item[]">电磁炉<br>

</div>

</body>

</html>


批改老师:灭绝师太批改时间:2019-02-16 15:55:16
老师总结:全选案例在后期使用场景较多,要好好掌握,理解每一条语句的意思

发布手记

热门词条