堆棧內存溢出
  簡體   English   中英

CSS復選框切換

[英]CSS checkbox toggle

 原文  2016-03-14 08:12:26  7   1    javascript/ jquery/ html/ css

問題描述

嗨，朋友，我是初學者（初級），我想學習一些事情。

我的問題是如何做手風琴復選框，但是對於我的嵌套復選框，這是演示點擊查看演示

這是我做的演示

html 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>No Title</title>
</head>
<body> 

       <div class="new-checkbox">
                 <ul>
                    <li><input type="checkbox" id="input1"><label for="input1">kategori <strong>(1)</strong></label>
                        <ul>
                        <li><input type="checkbox" id="input11"><label for="input11">kategori<strong>(11)</strong></label></li>
                        <li><input type="checkbox" id="input12"><label for="input12">kategori <strong>(12)</strong></label></li>
                        <li><input type="checkbox" id="input13"><label for="input13">kategori <strong>(13)</strong></label></li>
                        </ul>
                    </li>
                    <li><input type="checkbox" id="input2"><label for="input2">kategori <strong>(2)</strong></label></li>
                    <li><input type="checkbox" id="input3"><label for="input3">kategori <strong>(3)</strong></label>
                    <ul>
                        <li><input type="checkbox" id="input31"><label for="input31">kategori <strong>(31)</strong></label></li>
                        <li><input type="checkbox" id="input32"><label for="input32">kategori <strong>(32)</strong></label></li>
                        <li><input type="checkbox" id="input33"><label for="input33">kategori <strong>(33)</strong></label>
                                <ul>
                                <li><input type="checkbox" id="input331"><label for="input331">kategori <strong>(331)</strong></label></li>
                                <li><input type="checkbox" id="input332"><label for="input332">kategori <strong>(332)</strong></label></li>
                                <li><input type="checkbox" id="input333"><label for="input333">kategori <strong>(333)</strong></label></li>
                                </ul>
                        </li>
                    </ul>
                    </li>
                    </ul>
       </div><!--new-checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>

的CSS 

.new-checkbox ul{
            padding:0;
            margin:0;
            list-style:none;
            margin-left: 30px;
            font: normal 11px/16px "Segoe UI", Arial, Sans-serif;
        }
        .new-checkbox ul:first-child{
            margin-left: 0;
        }
        .new-checkbox ul li {margin: 3px 0;}
       .new-checkbox input[type="checkbox"] {
            display:none;
        }
        .new-checkbox label {
          cursor: pointer;
        }
        .new-checkbox input[type="checkbox"] + label:before {
          border: 1px solid #ffffff;
          content: "\00a0";
          display: inline-block;
          font: 16px/1em sans-serif;
          height: 13px;
          width: 13px;
          margin: 2px .25em 0 0;
          padding:0;
          vertical-align: top;
          border: solid 1px #1375b3;
         color: #1375b3;
         opacity: .50;

        }
        .new-checkbox input[type="checkbox"]:checked + label:before {
          background: #fff;
            color: #1375b3;
            content: "\2714";
          text-align: center;
            box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
            opacity: 1;
        }
        .new-checkbox input[type="checkbox"]:checked + label:after {
          font-weight: bold;
        }
        .new-checkbox ul li:before {
              content: "\25b6";
              display: inline-block;
              margin: 2px 0 0;
              width: 13px;
              height: 13px;
              vertical-align: top;
              text-align: center;
              color: #e74c3c;
              font-size: 8px;
              line-height: 13px;
              cursor:pointer;
        }
        .new-checkbox input[type="checkbox"]
        {
            display: none;
        }
        .new-checkbox  li
        {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        .new-checkbox input[type="checkbox"][id]:checked ~ li::before
          {
              content: "\25bc";
          }
        .new-checkbox  input[type="checkbox"][id]:not(:checked) ~ ul
        {
            display: none;
        }

js 

$(document).ready(function() {
  $('.new-checkbox input[type=checkbox]').on("change", function() {
    var $close = $(this).closest('ul').closest('li');
      if ($(this).is(':checked')) {
        // check all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', true);
        // check all parents
        $(this).parent().prev().prop('checked', true);
      } else {
        // uncheck all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', false);
      }
    while ($close.length) {
      $che = $close.find('ul input:checkbox');
      $checked = $close.find('ul input:checkbox:checked');
      $close.children('input').prop('checked', $che.length == $checked.length);
      $close = $($close.children('input')).closest('ul').closest('li');
      console.log($che.length, $checked.length);
    }
  });

});

在codepen上看到

1 個解決方案

解決方案1
 1 已采納  2016-03-14 08:29:00

您可以使用parentsUntil（）遍歷每個父元素，然后查看它是否具有選中的復選框，例如 

 $(document).ready(function() { $('.new-checkbox input[type=checkbox]').on("change", function() { $(this).parent().find('input[type=checkbox]').prop('checked', this.checked); if (!this.checked) { $(this).parentsUntil('.new-checkbox > ul', 'li').children('input[type=checkbox]').prop('checked', function() { return $(this).siblings('ul').find('input[type=checkbox]').is(':checked') }) } }); }); 
 .new-checkbox ul { padding: 0; margin: 0; list-style: none; margin-left: 30px; font: normal 11px/16px"Segoe UI", Arial, Sans-serif; } .new-checkbox ul:first-child { margin-left: 0; } .new-checkbox ul li { margin: 3px 0; } .new-checkbox input[type="checkbox"] { display: none; } .new-checkbox label { cursor: pointer; } .new-checkbox input[type="checkbox"] + label:before { border: 1px solid #ffffff; content: "\\00a0"; display: inline-block; font: 16px/1em sans-serif; height: 13px; width: 13px; margin: 2px .25em 0 0; padding: 0; vertical-align: top; border: solid 1px #1375b3; color: #1375b3; opacity: .50; } .new-checkbox input[type="checkbox"]:checked + label:before { background: #fff; color: #1375b3; content: "\\2714"; text-align: center; box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset; opacity: 1; } .new-checkbox input[type="checkbox"]:checked + label:after { font-weight: bold; } .new-checkbox ul li:before { content: "\\25b6"; display: inline-block; margin: 2px 0 0; width: 13px; height: 13px; vertical-align: top; text-align: center; color: #e74c3c; font-size: 8px; line-height: 13px; cursor: pointer; } .new-checkbox input[type="checkbox"] { display: none; } .new-checkbox li { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .new-checkbox input[type="checkbox"][id]:checked ~ li::before { content: "\\25bc"; } .new-checkbox input[type="checkbox"][id]:not(:checked) ~ ul { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="new-checkbox"> <ul> <li> <input type="checkbox" id="input1"> <label for="input1">kategori <strong>(1)</strong> </label> <ul> <li> <input type="checkbox" id="input11"> <label for="input11">kategori<strong>(11)</strong> </label> </li> <li> <input type="checkbox" id="input12"> <label for="input12">kategori <strong>(12)</strong> </label> </li> <li> <input type="checkbox" id="input13"> <label for="input13">kategori <strong>(13)</strong> </label> </li> </ul> </li> <li> <input type="checkbox" id="input2"> <label for="input2">kategori <strong>(2)</strong> </label> </li> <li> <input type="checkbox" id="input3"> <label for="input3">kategori <strong>(3)</strong> </label> <ul> <li> <input type="checkbox" id="input31"> <label for="input31">kategori <strong>(31)</strong> </label> </li> <li> <input type="checkbox" id="input32"> <label for="input32">kategori <strong>(32)</strong> </label> </li> <li> <input type="checkbox" id="input33"> <label for="input33">kategori <strong>(33)</strong> </label> <ul> <li> <input type="checkbox" id="input331"> <label for="input331">kategori <strong>(331)</strong> </label> </li> <li> <input type="checkbox" id="input332"> <label for="input332">kategori <strong>(332)</strong> </label> </li> <li> <input type="checkbox" id="input333"> <label for="input333">kategori <strong>(333)</strong> </label> </li> </ul> </li> </ul> </li> </ul> </div> <!--new-checkbox-->

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS jQuery復選框切換顯示 使用jQuery切換復選框CSS樣式 帶有JS切換的純CSS復選框不起作用 有沒有辦法使用 CSS 切換復選框輸入與另一個元素？ 剔除復選框切換CSS類，並在單擊時切換選中 切換復選框 切換復選框 復選框輸入在單擊時不檢查（CSS切換開關樣式） 使用CSS選中/取消選中復選框時切換文本和文本框 如何用 HTML CSS 中的復選框（勾選取消勾選）替換加減切換？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM