JQuery實現的 checkbox 全選、反選。
阿新 • • 發佈:2019-01-24
發現網上寫的全選的程式碼,不是完整的,是有bug的。全選它分幾種情況
1. 全選的checkbox選中時,子checkbox全部選中。反之,全部不選
2.子checkbox中,只要有沒有被選中的,取消全選checkbox的選中
3.子checkbox的數量和子checkbox被選中的數量一樣時,全選checkbox要被選中
//複選框事件 //全選、取消全選的事件 function selectAll(){ if ($("#SelectAll").attr("checked")) { $(":checkbox").attr("checked", true); } else { $(":checkbox").attr("checked", false); } } //子複選框的事件 function setSelectAll(){ //當沒有選中某個子複選框時,SelectAll取消選中 if (!$("#subcheck").checked) { $("#SelectAll").attr("checked", false); } var chsub = $("input[type='checkbox'][id='subcheck']").length; //獲取subcheck的個數 var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //獲取選中的subcheck的個數 if (checkedsub == chsub) { $("#SelectAll").attr("checked", true); } }
全選checkbox的id是SelectAll,子checkbox的id是subcheck。
如果頁面還有別的checkbox,selectAll方法裡面稍作修改。
JSP頁面程式碼如下:
<input type="checkbox" id="SelectAll" value="全選" onclick="selectAll();"/> <input type="checkbox" id="subcheck" value="1" onclick="setSelectAll();"/> <input type="checkbox" id="subcheck" value="2" onclick="setSelectAll();"/> <input type="checkbox" id="subcheck" value="3" onclick="setSelectAll();"/> <input type="checkbox" id="subcheck" value="4" onclick="setSelectAll();"/>