您正在使用IPV4(3.236.214.224)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 建党节 9
2021年 建军节 40
2022年 元 旦 193
2022年 春 节 224
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现复选框全选功能

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='IE=edge'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocum......

      <!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>Document</title>

    <style>

    table {

    width: 300px;

    border-spacing: 0;

    /* text-align: center; */

    margin: 100px auto;

    border-collapse: collapse;

    }


    table tr:nth-child(n+2)>td {

    text-align: left;

    background-color: rgb(250, 245, 245);

    color: dimgray;

    font-size: 14px;

    }


    table tr:nth-child(1) {

    background-color: skyblue;

    color: white;

    }


    th,

    td {

    padding: 10px;

    border: 0.5px solid gray;

    }

    </style>

    </head>


    <body>

    <table>

    <tr>

    <th><input type="checkbox" name="" id="all"></th>

    <th>商品</th>

    <th>价格</th>

    </tr>

    <tr>

    <td><input type="checkbox" name="" id="ip8"></td>

    <td>iPhone8</td>

    <td>8000</td>

    </tr>

    <tr>

    <td><input type="checkbox" name="" id="pro"></td>

    <td>iPad Pro</td>

    <td>5000</td>

    </tr>

    <tr>

    <td><input type="checkbox" name="" id="air"></td>

    <td>iPad Air</td>

    <td>2000</td>

    </tr>

    <tr>

    <td><input type="checkbox" name="" id="watch"></td>

    <td>Apple Watch</td>

    <td>2000</td>

    </tr>

    </table>


    <script>

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

    var items = document.querySelectorAll('tr>td>input');

    all.onclick = function() {

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

    items[i].checked = this.checked;

    }

    }



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

    items[i].onclick = function() {

    var flag_all = 1;

    for (var j = 0; j < items.length; j++) {

    if (items[j].checked == 0) {

    flag_all = 0;

    all.checked = flag_all;

    break;

    }

    }

    all.checked = flag_all;

    }

    }

    </script>

    </body>


    </html>

    手机扫描二维码可直达本页
      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/6/15 发布时间:12:34:56 点击:23 录入:齐天大圣
  • 上一篇:JavaScript实现动态加载删除表格
  • 下一篇:AJAX仿EXCEL表格功能
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.5 Build 21.06.17(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021