CSS checkbox toggle

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

Arun P Johny · Accepted Answer · 2016-03-14 08:29:00Z

1

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

answered Mar 14, 2016 at 8:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ani_css Over a year ago

thanks a lot but checkboxes not working well as before if u check except that one you are awesome :)

Arun P Johny Over a year ago

@recruit_man can you give the case where the checkbox is failing

ani_css Over a year ago

if I wanted to unchecked all parents be unhecked but in this example just one parents doing unhecked (sorry about my english)

Arun P Johny Over a year ago

Do you want to uncheck all the parents even if only 1 of its child checkbox is unchecked?

ani_css Over a year ago

for example kategori 33 has a child and it has to be visible not unvisible is it possible to css or jquery ? I will do scratch to do learn thanks for everything god be will you

|

Collectives™ on Stack Overflow

CSS checkbox toggle

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related