Javascript 使用jquery切换复选框

我有这个密码

function checkboxToggle(source,className) {
  checkboxes = document.getElementsByClassName(className);
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
  $("input[type='checkbox']."+className).change(function(){
    var a = $("input[type='checkbox']."+className);
    if(a.length == a.filter(":checked").length){
        source.checked = true;
    }else{
        source.checked = false;
    }
  });
}

函数checkboxToggle（源代码，类名）{
复选框=document.getElementsByClassName（className）；
对于（var i=0，n=checkbox.length；i这太长了：

checkboxes = document.getElementsByClassName(className);
for(var i=0, n=checkboxes.length;i<n;i++) {
   checkboxes[i].checked = source.checked;
 }

我不太明白为什么.change函数在checkBoxToggle函数中。我认为这是一个错误。
看看这个

我创建了一个简单的表单（小提琴中有两个）


全选
01
02
03
04
05

然后是一些jQuery：

<script>

function checkAll(element, className) {

    var checkboxesToChange = typeof(className) === 'undefined' || className === ''  ? 'input[type="checkbox"]' : '.'+className;

    var $form = $(element).closest('form');
    var $checkboxes = $form.find(checkboxesToChange);

    if($(element).is(':checked')){
        $checkboxes.prop('checked', true);
    }else{
        $checkboxes.prop('checked', false);
    }

}

$('.check-all').on('change', function(){
    checkAll(this);
    //checkAll(this, 'checkboxes'); 
})

</script>


函数checkAll（元素、类名）{
var checkboxesToChange=typeof（className）==“未定义”| | className===“输入[type=“checkbox”]：”。+className；
var$form=$（element）.closest（'form'）；
var$checkboxes=$form.find（checkboxesToChange）；
if（$（元素）.is（':checked'））{
$checkbox.prop（'checked'，true）；
}否则{
$checkbox.prop（'checked'，false）；
}
}
$（'.check all'）。在（'change'，function（）上{
检查所有（此项）；
//选中全部（这是“复选框”）；
})

如果您希望只选择一个可以切换的“全选”，则可以这样做。它还接受第二个参数，在该参数中，它将仅打开和关闭您指定的类的复选框

希望这能有所帮助，或者至少提供一些关于如何减少代码的见解。
请参阅，我将.change函数放入其中，以便获得类名。
<form>
    <label for="checkbox-all">Select All</label>
    <input id="checkbox-all" class="check-all" type="checkbox" />

    <label for="checkbox-01">01</label>
    <input id="checkbox-01" class="checkbox" type="checkbox" />

    <label for="checkbox-02">02</label>
    <input id="checkbox-02" class="" type="checkbox" />

    <label for="checkbox-03">03</label>
    <input id="checkbox-03" class="" type="checkbox" />

    <label for="checkbox-04">04</label>
    <input id="checkbox-04" class="checkbox" type="checkbox" />

    <label for="checkbox-05">05</label>
    <input id="checkbox-05" class="checkbox" type="checkbox" />
</form>

<script>

function checkAll(element, className) {

    var checkboxesToChange = typeof(className) === 'undefined' || className === ''  ? 'input[type="checkbox"]' : '.'+className;

    var $form = $(element).closest('form');
    var $checkboxes = $form.find(checkboxesToChange);

    if($(element).is(':checked')){
        $checkboxes.prop('checked', true);
    }else{
        $checkboxes.prop('checked', false);
    }

}

$('.check-all').on('change', function(){
    checkAll(this);
    //checkAll(this, 'checkboxes'); 
})

</script>