切換複選框使用jQuery

我有這樣的代碼，切換複選框使用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; 
    } 
    }); 
}

來源是全選的複選框。 className是需要更改的複選框的類名稱。 for循環是一個循環，用於更改取決於「全選」狀態的複選框狀態。我還添加了.change事件，當更改複選框狀態時將更改「全選」狀態。

此代碼正在工作，但我的問題是，我想使此代碼更小。是否可以使這個代碼更小？

來源

2016-04-07 JMA

請參閱[問]和** [mcve] ** – Tushar

這是太長：

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

我不明白爲什麼你.change功能是checkBoxToggle函數內。我認爲這是一個錯誤。

來源

2016-04-07 15:34:58 TKoL

我把.change函數放在裏面，這樣我就可以得到className。 – JMA

看看這個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>

如果你正在尋找只是有一個選擇你可以切換，這將做到這一點。它還接受第二個參數，它只會打開和關閉您指定類的複選框。

希望這會有所幫助，或至少提供一些關於如何減少代碼的見解。

來源

2016-04-07 16:28:05

切換複選框使用jQuery

回答

相關問題