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>
  • 相关阅读:
    [NOIP2011提高组]聪明的质监员
    NOIP 2010 关押罪犯
    题目:埃及分数
    用scanf输入long long 型的数
    poj 1014 Dividing
    Cactus
    SQLite数据库的增删改查代码
    UltraGrid常用方法属性代码
    维护数据表常用SQL语句
    C#备份收藏夹代码
  • 原文地址:https://www.cnblogs.com/jinsuo/p/9415422.html
Copyright © 2011-2022 走看看