CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

CSS checkbox toggle

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

Upvotes: 0

Views: 205

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

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

Upvotes: 1

Related Questions