2
버튼을 클릭하면 목록 요소 내의 모든 확인란이 활성화됩니다. 버튼을 클릭하면 버튼이 사라집니다. 내가 뭘 잘못 했니?체크 상자를 활성화하려면 버튼을 클릭하여 사라집니다.
다음자바 스크립트 :
여기$('.filter-arrow').click(function() {
//get id from clicked element
var id = $(this).attr("id");
//switch class to display open arrow
$(this).toggleClass("arrow-close");
//get function to enable checkbox
checkbox($('.parentcheck'), $(this))
});
function checkbox(check, arrow){
if(arrow.attr("class","checkAll")){
for(var i=0; i<check.length; i++){
check[i].checked = true;
var arrow_id = arrow.attr("id");
arrow_id.toggleClass("uncheckAll");
}
}else{
for(var i=0; i<check.length; i++){
check[i].checked = false;
var arrow_id = arrow.attr("id");
arrow_id.toggleClass("checkAll");
}
}
}
되는 HTML :
<ul>
<li class="checkbox">
<!--Button-->
<div id="first-arrow" class="filter-arrow checkAll arrow-open"></div>
<input id="check" class="parentcheck" name="parentcheck" type="checkbox"/>
<p>first-element</p>
<!-- begin sub content -->
<ul>
<li class="checkbox">
<div id="first-sub-arrow" class="arrow-open"></div>
<input class="input-checkbox" name="checkbox" type="checkbox"/>
<p>first-sub-element</p>
<!-- begin subsub content -->
<ul>
<li class="checkbox ">
<input class="checkbox" type="checkbox" name="subcheckbox" />
<p>first-sub-sub-element</p>
</li>
<li>
<input class="checkbox" type="checkbox" name="subcheckbox" />
<p> first-sub-sub-element(2)</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
…
</li>
</ul>
CSS :
.filter-arrow{
clear:both;
float:right;
height: 12px;
width: 22px;
}
.arrow-open{
background:url(pic/arrow-close.png) no-repeat left top;
}
.arrow-close{
background: url(pic/arrow-open.png) no-repeat left top;
}
지금
의 작업 ... 임 여기 내 코드입니다 "ch eckAll "와"uncheckAll " 지금은 내가 늘 버튼의 클릭으로 그것을 - 단지 부모의 체크 박스에 cklicking으로 ... 그냥이 같은
:해야합니다 모든 체크 박스를 확인var filterGeschichte;
filterGeschichte = function($filterContainer,$categoryToggler){
$categoryToggler.click(function(e){
var $toggler = $(this);
$toggler.nextAll("ul.filter-sub").eq(0).slideToggle(300).find("li").show();
});
$filterContainer.each(function(){
$(this).find("input[type=checkbox]").change(function(){
var $that = $(this);
//console.log($that.is(":checked"))
if($that.parent().find("ul.filter-sub").length) {
$that.parent().find("ul.filter-sub").find("input[type=checkbox]").attr("checked", $that.is(":checked"));
}
});
});
};
// JavaScript Document
$(document).ready(function(){
filterGeschichte($("#scrollthefilter form:eq(0)"), $("div.filter-arrow"))
버튼은 어디에 있습니까? 코드에서 볼 수 없습니다 – gotofritz
jsfiddle 테스트에 대한 링크를 추가하십시오 – Mbrevda
예, 코드 절반을 가져온 것 같습니다. 확인하십시오. –