js small exercise -- form with checkbox

Effect display: Click the select all button to tick all, and click again to unselect all; click all four mobile phones, then the select all button is also ticked. If a mobile phone is not selected, the Select All button will not be checked.

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample005 - 带复选框表格</title>
		<link rel="stylesheet" type="text/css" href="css/cute.css" />
		<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
    <table class="table" id="table">
        <tbody>
            <tr>
                <th><input type="checkbox" id="head"></th>
                <th>商品名称</th>
                <th>商品数量</th>
                <th>商品单价</th>
            </tr>
      
       
            <tr>
                <td><input type="checkbox" ></td>
                <td>小米手机</td>
                <td>96</td>
                <td>4999</td>
            </tr>
            <tr>
                <td><input type="checkbox" ></td>
                <td>魅族手机</td>
                <td>56</td>
                <td>5666</td>
            </tr>
            <tr>
                <td><input type="checkbox" ></td>
                <td>苹果手机</td>
                <td>67</td>
                <td>3444</td>
            </tr>
            <tr>
                <td><input type="checkbox" ></td>
                <td>华为手机</td>
                <td>78</td>
                <td>5666</td>
            </tr>
        </tbody>
    </table>
</body>
<!-- 当页面加载完成，载入JavaScript文件，为Html元素添加动作 -->
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>

</html>

css code:

*{
    margin: 0px;
    padding: 0px;
}
#table>tbody>tr>th,
.table>tbody>tr>td{
    border: 1px pink solid;
    width: 100px;
    height: 35px;
    cursor: pointer;
    line-height: 35px;
        /* 水平居中 */
    text-align:center;
    display: block;
    float: left;
}
#table>tbody>tr>th{
    background-color: antiquewhite;
}
.table>tbody>tr:hover{
    background-color: antiquewhite;
}

js code:

let head=document.getElementById("head");
let input=document.getElementById("table").getElementsByTagName("input");
let tr=document.getElementById("table").getElementsByTagName("tr");
//全选/全不选
head.onclick=function(){
    for(let i=1;i<input.length;i++){
        // 如果全选为true那么下面四个列表页都要勾上 否则都不勾
        input[i].checked=this.checked;
        
    }
}
//input都勾时 全选为true，input有一个没勾 全选为false

for(let i=1;i<tr.length;i++){
    
    tr[i].onclick=function(){
        let flag=true;
        for(let j=1;j<input.length;j++){
        if(input[j].checked==false){
            flag=false;
            break;         
        }
    }
    head.checked=flag;
  
    }
}

js small exercise -- form with checkbox

Guess you like