我該如何更改我的密碼？

無論何時我想點擊標籤，我的子級別的元素都會顯示它沒問題，但是如果我點擊複選框（而不是標籤），我的複選框應該被選中或者通過其他方式填寫複選標記（如果我點擊標籤，我的複選框必須是空的檢查）。我該如何更改我的密碼？

這篇文章explainment從我的最後一個職位，我想這是不可能做到這一點，我不得不改變我的結構，做我想做的

我的HTML

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

    <div class="my-checkbox"> 

    </div> 

     <div class="new-checkbox"> 
     <ul> 
      <li class="hasUl"> 
      <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 class="hasUl"> 
      <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; 
    } 
    .additional:before{ 
     border: 1px solid #ffffff; 
     content: "\00a0" !important; 
     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: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; 
    } 
    li.parent.has-checked:before { 
     content: "\25bc" !important; 
     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 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 li ul { 
     display: none; 
    } 
    .new-checkbox li.has-checked > ul { 
     display: block; 
    }

和我的jquery

$(document).ready(function() { 

    $('.new-checkbox li:has(ul)').addClass('parent'); 

    $(".new-checkbox li.hasUl > label:not(:input[type='checkbox'])").on("click",function(){ 
    $(this).addClass("additional"); 
    }); 
    $('.new-checkbox input[type=checkbox]:not(label)').on("change", function() { 
    var checked = this.checked, 
     $li = $(this).parent(); 
    $li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked); 

    $li.parentsUntil('.new-checkbox', 'li').each(function() { 
     var $checks = $(this).find('ul input[type=checkbox]'); 
     $(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length); 

     $(this).toggleClass('has-checked', $checks.is(':checked')); 
    }); 
    }); 
});

來源

2016-03-15 ani_css

沒有所需的JavaScript：

.check-toggle input[type=checkbox] + label + div{ 
 
    display:none; 
 
} 
 
.check-toggle input[type=checkbox]:checked + label + div{ 
 
    display:block; 
 
}

<div class="check-toggle"> 
 
    <input type="checkbox" id="my-id"> 
 
    <label for="my-id">Check me</label> 
 
    <div> 
 
    Some content here 
 
    </div> 
 
</div>

來源

2016-03-15 13:01:15 rybo111

卜如果我點擊標籤複選框，將我不想checked..no到this.I想如果我點擊複選框它必須是複選標記，或者如果我單擊標籤子級別ul必須顯示:) –

@fortherest這聽起來像你正在使用標籤不正確。使用標籤來檢查複選框。如果您需要其他行爲，請在輸入更改時使用單獨的按鈕或監視器。 – rybo111

我是新來的CSS和jquery，我不知道該怎麼做，我想我必須修復目前的結構，所以謝謝 –

我該如何更改我的密碼？

回答

相關問題