CSS checkbox toggle

Привет друзья Я начинающий (младший) передняя часть , и я хочу научиться чему-то заняться.CSS checkbox toggle

мой вопрос, как сделать аккордеон флажков, но для моих вложенных флажков это демо click to see demo

и этот идентификатор моя демка, что я

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

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

источник

2016-03-14 ani_css

Вы можете использовать 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-->

источник

2016-03-14 08:29:00

спасибо много но флажки не работают хорошо, как раньше, если вы проверяете, за исключением того, что вы удивительны :) –

@recruit_man вы можете дать e, когда флажок не установлен –

, если я хочу снять флажок, все родители не будут отмечены, но в этом примере только один из родителей делает незафиксированные (извините за мой английский) –

CSS checkbox toggle

ответ

Смежные вопросы