тумблер флажок с помощью JQuery

Question

У меня есть этот код,

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; 
    } 
    }); 
} 

Источник находится флажок для Select All. КлассName - это имя класса, которое необходимо изменить. Цикл for - это цикл для изменения состояния флажков, которое зависит от состояния «Выбрать все». Я также добавил событие change, которое изменит состояние «Выбрать все» при изменении состояния флажка.

Этот код работает, но моя проблема в том, что я хотел бы сделать этот код меньше. Можно ли уменьшить этот код?

Answer 1

это слишком долго:

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

Использование JQuery, это может быть что-то вроде:

$(classname).prop('checked', source.checked); 

Я не совсем понимаю, почему ваша функция .Кнопкой находится внутри функции checkBoxToggle. Я думаю, что это ошибка.

Answer 2

Посмотрите на это JSFiddle.

Я создал простую форму (в скрипке есть два)

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

А потом некоторые 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> 

Если вы хотите, чтобы просто отборное все, что вы можете переключаться , это сделает это. Он также принимает второй параметр, в котором он будет включать или выключать флажки с указанным вами классом.

Надеюсь, что это поможет или, по крайней мере, дает некоторое представление о том, как вы можете уменьшить код.