2012-01-01 3 views
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")) 
+0

버튼은 어디에 있습니까? 코드에서 볼 수 없습니다 – gotofritz

+2

jsfiddle 테스트에 대한 링크를 추가하십시오 – Mbrevda

+0

예, 코드 절반을 가져온 것 같습니다. 확인하십시오. –

답변

1

다음과 같이 쉽습니다.

$('.first-arrow').click(function() { 
    $(":checkbox").attr('checked', 'checked'); 
}); 
+0

대신 내 방법을 사용하도록 코드를 업데이트 해 주실 수 있습니까? 위 세 줄은 단추를 숨기지 않습니다 ... –

관련 문제