stackoom
  简体   繁体   中英

CSS checkbox toggle

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

Question

Hi friends I am a beginner (junior) front end and I want to learn something to do.

my question is how to do accordion checkboxes but for my nested checkboxes this is the demo click to see demo

and this id my demo that I do

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);
    }
  });

});

see on codepen

1 answers

solution1
 1 ACCPTED  2016-03-14 08:29:00

You can use a parentsUntil() to iterate over each parent element and then see whether it has a checked checkbox like 

 $(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-->

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question css jquery checkbox toggle display Toggle checkbox css styling using jQuery Pure CSS Checkbox with JS toggle not working Is there a way to toggle a checkbox input with another element with CSS? knockout checkbox toggle css classes and toggle checked upon click Toggle a checkbox Toggle Checkbox Checkbox input not checking when clicked (CSS toggle switch styling) Toggle Text and Textbox when Checkbox is checked/unchecked using CSS How to replace plus minus toggle with checkbox(tick untick) in HTML CSS?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM