JS全选与反选

js实现全选与反选的代码

主要通过js循环获取事件并给标签添加单击事件,全选按钮主要通过全选框的checked属性来循环判断布尔类型的值,并把值赋给单选框的的checked属性。

全选框按钮功能实现之后,主要解决单选框的状态也要影响全选框,这需要我们每点击一次单选框,都要循环检查一下单选框是否相同,如果都处于点击状态,那么全选框也要处于点击状态,反之,如果有一个不同,全选也处于选空状态。
效果如下图:

全部代码如下:

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

    style>
head>

<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" name="" id="qx">th>
                    <th>商品th>
                    <th>价格th>
                tr>
            thead>
            <tbody id="dx">
                <tr>
                    <td><input type="checkbox" name="" id="">td>
                    <td>手机td>
                    <td>2000td>

                tr>
                <tr>
                    <td><input type="checkbox" name="" id="">td>
                    <td>电脑td>
                    <td>1500td>

                tr>
                <tr>
                    <td><input type="checkbox" name="" id="">td>
                    <td>平板td>
                    <td>1000td>

                tr>
            tbody>
        table>
    div>
    
    <script>
        var qx = document.getElementById("qx");
        var dx = document.getElementById("dx").getElementsByTagName("input");
        qx.onclick = function () {
            for (i = 0; i < dx.length; i++) {
                dx[i].checked = this.checked;
            }

        }

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

            dx[i].onclick = function () {
                var flag = true;
                for (var i = 0; i < dx.length; i++) {
					//  !取反操作
                    if (!dx[i].checked) {
                        flag = false;
                    }

                }
                qx.checked = flag;
            }
        }
    script>

body>

html>

你可能感兴趣的:(javascript,前端,html)