div+css的图文混合以及checkbox的全选，取消全选和子复选框的选择影响全选的选择

最新推荐文章于 2022-06-01 15:30:28 发布

wqw_pakchoi

最新推荐文章于 2022-06-01 15:30:28 发布

阅读量381

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/wqw_pakchoi/article/details/90741280

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

让我笑一会儿。

这个标题说得我自己都不知道我在表述什么。哈哈哈

不管了，话说得自己明白就好hhh，读者不明白的话那么运行代码吧

上代码：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>图文混合和全选</title>
       <style type="text/css">
           .banner {
               background: #999999;
               width: 100%;
               height: 30px;
           }

           .banner .ban_left {
               margin-left: 20px;
               float: left;
               position: relative;
           }

           .banner .ban_right {
               float: right;
               margin-right: 20px;
           }

           .banner span {
               font-family: "隶书";
               color: #FFFFFF;
               font-weight: bold;
           }

           .content {
               background: url(../img/bj.jpg) no-repeat;
               background-size: cover;
           }

           .bookdiv {
               width: 800px;
               height: 140px;
               padding-top: 28px;
               margin: 0 auto;
           }

           .bookdiv dl {
               margin: 0px;
               padding: 0px;
           }

           .bookdiv dl dt {
               float: left;
               text-align: center;
               width: 110px;
               height: 106px;
               margin: 0px;
               padding: 2px 0px;
           }

           .bookdiv dl dt img {
               border: 1px solid #BBBBBB;
               width: 80px;
               height: 96px;
               vertical-align: middle;
           }

           .bookdiv dl dd {
               width: 280px;
               line-height: 106px;
               text-align: center;
               margin: 0px;
               padding: 0px;
               margin-left: 150px;
           }

           .bookdiv dl dd a {
               font: 14px 宋体;
           }

           [name=all] {
               margin-right: 10px;
           }
       </style>
       <script type="text/javascript">
           //全选
           function All() {
               var all = document.getElementById("all");
               var check = document.getElementsByName("check");
               for(i = 0; i < check.length; i++) {
                   check[i].checked = all.checked;
               }
           }
           //复选框的选择影响全选的选择
           function setAll() {
               var all = document.getElementById("all");
               var check = document.getElementsByName("check");
               for(i = 0,j = 0; i < check.length; i++) {
                   if(check[i].checked)
                      j++;
               }
               if(j != check.length){
                   all.checked = false;
               }
               if(j == check.length){
                   all.checked = true;
               }
           }
       </script>
   </head>

   <body>
       <div class="banner">
           <div class="ban_left">
               <input type="checkbox" name="all" id="all" value="" / οnclick="All()"><span>全选</span>
           </div>
           <div class="ban_right">
               <span>计算机图书</span>
           </div>
       </div>
       <div class="content">
           <div class="bookdiv">
               <dl>
                   <dt><input type="checkbox" name="check" value="" class = "checknum" οnclick="setAll()"/><img src="../img/cs.jpg"/ alt="c#"></dt>
                   <dd>
                       <a href="#">《c#》</a>
                   </dd>
               </dl>
           </div>
           <div class="bookdiv">
               <dl>
                   <dt><input type="checkbox" name="check" value="" class = "checknum" οnclick="setAll()"/><img src="../img/ps.jpg"/ alt="ps"></dt>
                   <dd>
                       <a href="#">《ps》</a>
                   </dd>
               </dl>
           </div>
           <div class="bookdiv">
               <dl>
                   <dt><input type="checkbox" name="check" value="" class = "checknum" οnclick="setAll()"/><img src="../img/wl.jpg"/ alt="网络"></dt>
                   <dd>
                       <a href="#">《计算机网络》</a>
                   </dd>
               </dl>
           </div>
       </div>
   </body>

</html>

运行截图：

代码中用到的图片：算了不放了

The end..

wqw_pakchoi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css的图文混合以及checkbox的全选，取消全选和子复选框的选择影响全选的选择

让我笑一会儿。这个标题说得我自己都不知道我在表述什么。哈哈哈不管了，话说得自己明白就好hhh，读者不明白的话那么运行代码吧上代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图文混合和全选</titl...
复制链接

扫一扫

专栏目录