2016-03-15 23 views
0

嗨我開發複選框,我有一些問題。如果我的李父母沒有ul孩子,它不能切換。我在談論李元素左邊的紅色箭頭。如果沒有小孩如何不切換?

我得到有效解決由於問題@Arun P佐尼只是一件事留給我所要做的就是點擊時標籤複選框musn't只thoose檢查已經通過了UL孩子

see my codeson codepen

HTML

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

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

.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.downCheck: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 ul li:before { 
    content:""; 
    width:16px; 
    height:16px; 
    display:block; 
    float:left; 
    background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center; 
     margin-top: 2px; 
} 
li.downCheck:before{ 
    content:""; 
    width:16px; 
    height:16px; 
    display:block; 
    float:left; 
    background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important; 
    margin-top: 2px; 
} 
*/ 
.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; 
} 

JQ uery碼

$(document).ready(function() { 


    $('.new-checkbox input[type=checkbox]').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')); 
    }); 

    }); 


    $('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) { 
     $(this).parent("li").stop().toggleClass("downCheck"); 

     }); 

    $(".new-checkbox ul li > * li:has(ul)").addClass("downCheck"); 


}); 
+0

不知道你是什麼 –

+0

後,你是什麼意思不想切換 –

+0

我加codepen鏈接@ArunPJohny –

回答

0

可以使用has-checked類的風格元素,就沒有必要有一個新的

$(document).ready(function() { 
 

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

 
    $('.new-checkbox input[type=checkbox]').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')); 
 
    }); 
 

 
    }); 
 
});
.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; 
 
} 
 
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 ul li:before { 
 
    content:""; 
 
    width:16px; 
 
    height:16px; 
 
    display:block; 
 
    float:left; 
 
    background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center; 
 
     margin-top: 2px; 
 
} 
 
li.downCheck:before{ 
 
    content:""; 
 
    width:16px; 
 
    height:16px; 
 
    display:block; 
 
    float:left; 
 
    background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important; 
 
    margin-top: 2px; 
 
} 
 
*/ 
 

 
.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; 
 
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script> 
 
<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-->

+0

謝謝@Arun,但我想.downCheck圖標是相反的,你編輯你對我如此幫助 –

+0

我不知道如何,但我想感謝你@阿倫धन्यवाद:) –

+0

順便說一句,它是重要的,如果李有孩子,無論我點擊複選框必須checked.but如果我的複選框有孩子如果我點擊標籤,它必須打開孩子有沒有辦法做?最後的東西 –

0

代碼替換

$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) { 
    $(this).parent("li:has(ul)").stop().toggleClass("downCheck"); 
    }); 

$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) { 
    $(this).parent("li").stop().toggleClass("downCheck"); 
    }); 

Codepen Demo

+0

謝謝,但如果我沒有選中我的所有複選框,這是在我的李下他們不隱藏自己? –

+0

嗨@Dhaval你非常感恩。但還有一件事留下了。如果所有複選框都沒有選中.Downcheck是旋轉到下來我不想這this.it必須旋轉右對不起我的英語 –

相關問題