全选特效并修改checkbox样式

最新推荐文章于 2023-08-15 17:04:31 发布

weixin_30838873

最新推荐文章于 2023-08-15 17:04:31 发布

阅读量371

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/9415422.html

版权

<!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>

转载于:https://www.cnblogs.com/jinsuo/p/9415422.html

weixin_30838873

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选特效并修改checkbox样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选</title> <style> #myCheck1 + label{ backgroun...
复制链接

扫一扫