zoukankan      html  css  js  c++  java
  • 全选特效并修改checkbox样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选</title>
        <style>
            #myCheck1 + label{
                background-color: white;
        border-radius: 5px;
        border:1px solid #dbdbdb;
        width:20px;
        height:20px;
        display: inline-block;
        text-align: center;
        vertical-align: text-top;
        margin-left: -22px;
        line-height: 20px;
            }
        #myCheck1:checked + label:after{
                content: "2714";
        color: #8bbd26;
        border: 1px solid #8bbd26;
        background-color: white;
        border-radius: 5px;
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        margin-left: -1px;
        line-height: 20px;
            }
        </style>
    </head>
    <body>
        全选<input type="checkbox" id="myCheck1">
        <label for="myCheck1"></label>
        <div id="list">
            <input type="checkbox" name="" value=""><span>选项一</span>
            <input type="checkbox" name="" value=""><span>选项二</span>
            <input type="checkbox" name="" value=""><span>选项三</span>
            <input type="checkbox" name="" value=""><span>选项四</span>    
        </div>
    </body>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
              var all = document.getElementById("myCheck1");
                 var tbody = document.getElementById("list");
                 var checkboxs = tbody.getElementsByTagName("input");
                 all.onclick = function() {
                     for (var i = 0; i < checkboxs.length; i++) {
                         var checkbox = checkboxs[i];
                         checkbox.checked = this.checked;
                     }
                     
                 };
                 for (var i = 0; i < checkboxs.length; i++) {
                     checkboxs[i].onclick = function() {
                         var isCheckedAll = true;
                         for (var i = 0; i < checkboxs.length; i++) {
                             if (!checkboxs[i].checked) {
                                 isCheckedAll = false;
                                 break;
                             }
                         }
                         all.checked = isCheckedAll;
                     };
                 }
    
          
    </script>
    </html>
  • 相关阅读:
    Python全栈开发之6、面向对象
    Python全栈开发之5、模块
    kvm恢复和删除快照
    virsh命令和虚拟机克隆
    Python全栈开发之4、迭代器、生成器、装饰器
    索引
    字段属性--唯一键
    安装虚拟机
    字段属性--自增长
    centos7安装kvm
  • 原文地址:https://www.cnblogs.com/jinsuo/p/9415422.html
Copyright © 2011-2022 走看看