jQuery Checkbook全選功能是一種常見的網頁復選框勾選方式。該功能可以讓用戶點擊一個復選框可以選擇或取消所有與之相關的項目。其中,jQuery是一款基于JavaScript庫的工具,它可以大幅簡化網頁開發中的代碼編寫難度。下面我們來看一下如何使用jQuery Checkbook全選功能。
<script type="text/javascript"> $(document).ready(function(){ // 給全選復選框綁定事件 $("#checkAll").click(function(){ // 獲取該復選框的選中狀態 var isChecked = $(this).prop("checked"); // 將列表中的所有復選框都設置為該狀態 $(".item").prop("checked", isChecked); }); }); </script> <input type="checkbox" id="checkAll"> 全選 <input type="checkbox" class="item" value="1"> 項目1 <input type="checkbox" class="item" value="2"> 項目2 <input type="checkbox" class="item" value="3"> 項目3 <input type="checkbox" class="item" value="4"> 項目4
在以上代碼中,我們先使用jQuery的ready()函數來指定在頁面加載完成后執行的代碼。我們將“全選”復選框的點擊事件綁定在$("#checkAll")元素上。當用戶點擊該復選框時,我們首先獲取它的選中狀態,然后使用prop()方法將列表中的所有復選框都設置為該狀態。其中,item是一個類名,它用于標識所有需要全選的復選框。這樣,當用戶點擊“全選”復選框時,所有的復選框就都被選中了。
上一篇印章 css