jQuery是一種流行的JavaScript庫,可以幫助開發人員輕松地處理DOM操作和事件處理。其中一個常見的jQuery組件是多選框。多選框允許用戶選擇多個選項,而不僅僅是一個。本文將介紹如何使用jQuery input多選框。
//HTML代碼: <div class="checkbox"> <label><input type="checkbox" value="option1"> 選項1</label> <label><input type="checkbox" value="option2"> 選項2</label> <label><input type="checkbox" value="option3"> 選項3</label> </div> //JavaScript代碼: $(document).ready(function(){ $('.checkbox input[type="checkbox"]').change(function(){ // 給所有多選框綁定一個change事件 var checkedValues = []; // 初始化一個空數組,用于儲存選中的值 $('.checkbox input[type="checkbox"]:checked').each(function(){ // 獲取所有被選中的多選框元素 checkedValues.push($(this).val()); // 把選中的值添加到數組中 }); console.log(checkedValues); // 在控制臺中打印出選中的值 }); });
這段代碼使用了jQuery的選擇器和事件處理函數。它首先選擇所有的多選框元素,然后為它們綁定了一個change事件。每當用戶選中或取消選中一個多選框時,都會觸發這個事件。事件處理函數首先創建一個空數組,然后獲取所有被選中的多選框元素。它使用jQuery的each()函數遍歷每個被選中的多選框,把它們的值添加到數組中。最后,它使用console.log()函數在控制臺中打印出選中的值。
這個例子只是多選框的一個基本用法。你可以使用jQuery來完成更加復雜的操作,例如顯示或隱藏基于多選框的特定元素或動態生成頁面內容。