jQuery checkboxlist是一個常用的JavaScript插件,可以快速實現復選框列表的選擇、取消、全選、反選等功能。下面是一個簡單的演示例子:
<html> <head> <script src="jquery.min.js"></script> <script src="jquery.checkboxlist.js"></script> </head> <body> <ul id="list"> <li><input type="checkbox" value="1">選項1</li> <li><input type="checkbox" value="2">選項2</li> <li><input type="checkbox" value="3">選項3</li> </ul> <script> $('#list').checkboxlist(); </script> </body>
上面的代碼中,<ul>
元素里包含了多個選項,每個選項都是一個<li>
元素,而<input type="checkbox">
元素則用來表示復選框。通過調用$('#list').checkboxlist()
方法,就可以將這些復選框包裝成一個整體,并添加全選、反選等功能。
除了基本的用法,jQuery checkboxlist還提供了靈活的配置選項,可以設置多選框的樣式、回調函數以及默認選項等。例如,下面的代碼將全選按鈕的文字改為“全選/取消”,并設置當所有選項都被選中時,自動選中“全選”按鈕:
$('#list').checkboxlist({ checkAllText: '全選/取消', onItemChecked: function(item, checked) { var allItems = $('#list li :checkbox'), allChecked = allItems.filter(':checked').length === allItems.length; $('#list :checkbox[name="__all__"]').prop('checked', allChecked); } });
最后,在使用jQuery checkboxlist的過程中,我們需要注意以下幾點:
- 必須先引入jQuery庫和checkboxlist插件庫
- 復選框的值必須設置,可以通過
<input type="hidden" name="name[]" value="1">
方式來獲取選中的值 - 可以通過JavaScript代碼來動態添加、刪除選項,但一定要重新調用
$('#list').checkboxlist()
方法,使新的選項被包裝起來