Question

单击该按钮时，列表元素中的所有复选框都应激活。但是通过单击按钮，按钮会自动消失。我做错了什么？这是我的代码：

这里的JavaScript：

$('.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;
    }

现在它的工作......我没有上课“checkAll”和“uncheckAll” 现在我不会点击按钮 - 只需点击父复选框...

就像这样：

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") )

Answer 1

选中所有复选框应该像这样简单：

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

按钮消失，单击它以启用该复选框

1 个答案: