Кнопка исчезнет, ​​нажав на нее, чтобы включить флажок

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", пока я не буду делать это с помощью нажатия на кнопку - просто с помощью 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") )

Answer 1

Проверка всех флажков должна быть такой простой:

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