![](/img/trans.png)
[英]select/deselect all check boxes on click a single check box by javascript
[英]Select All | Deselect All check boxes using a toggle button
我需要選擇全部並取消選擇按鈕切換上的所有復選框。
這是復選框的html代碼
<div class="accordion-header js-accordion-header"> <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" style="display: none;"> <label for="labelauty-2"> <span class="labelauty-unchecked-image"></span> <span class="labelauty-checked-image"></span> </label> tc_Logout </div>
當我選擇此復選框時, aria-checked =“ true”自動添加到<label for="labelauty-2">
<label for="labelauty-1" aria-checked="true"> <span class="labelauty-unchecked-image"></span> <span class="labelauty-checked-image"></span> </label>
當選中和取消選中狀態時,它將狀態更改為true或false 。
現在,我有幾個類似的復選框,需要使用切換按鈕進行選中或取消選中。
這是我的html代碼的切換按鈕
<div class="toggle-wrap w-checkbox float-right"> <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkboxtoggle" onclick="toggle()"> <label class="toggle-label w-form-label" for="Toggle-Switch"></label> <div class="toggle"> <div class="toggle-active"> <div class="active-overlay"></div> <div class="top-line"></div> <div class="bottom-line"></div> </div> </div> </div>
這是我的JS代碼,返回錯誤“未定義prop”
function toggle(source) { checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }
如何使用javascript或jquery實現此目的
注意:請參見下一個示例,該示例使用事件偵聽器,並且是首選。
為了解決這個問題,您必須解決一些問題。
參見: https : //jsfiddle.net/0p64mdsg/4
首先,您的輸入類型實際上並沒有切換。 其次,您在調用切換功能時沒有傳遞this
參數。
我的jsFiddle中的當前代碼版本:
function toggle(source) { checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox'); alert('TEST2'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }
<div class="accordion-header js-accordion-header"> <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" > <label for="labelauty-2"> <span class="labelauty-unchecked-image"></span> <span class="labelauty-checked-image"></span> </label> tc_Logout </div> <label for="labelauty-1" aria-checked="true"> <span class="labelauty-unchecked-image"></span> <span class="labelauty-checked-image"></span> </label> Test1 <div class="toggle-wrap w-checkbox float-right"> <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)"> <label class="toggle-label w-form-label" for="Toggle-Switch"></label> <div class="toggle"> <div class="toggle-active"> <div class="active-overlay"></div> <div class="top-line"></div> <div class="bottom-line"></div> </div> </div> </div>
由於onClick
不是首選,因此您應該像這樣處理切換點擊處理: https : //jsfiddle.net/0p64mdsg/15/
<script>
document.getElementById("Toggle-Switch").addEventListener("click", toggle);
function toggle(source) {
checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
alert('TEST2' + source);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = document.getElementById("Toggle-Switch").checked;
}
}
</script>
嘗試此操作以選擇/取消選擇所有復選框
$(document).on('click','#chkAll',function(){ if($(this).prop('checked')==true){ $('.ChkSelect').attr("checked",true) } else { $('.ChkSelect').attr("checked",false) } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"> <input type="checkbox" class="ChkSelect"><br/><br/> Select/Deselect All :<input type="checkbox" id="chkAll"> <br/><br/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.