jQuery 是一個廣泛使用的 JavaScript 庫,其選擇器功能是非常強大的,可以方便地選擇網頁中的元素。本文將介紹 jQuery 如何使用選擇器選擇復選框。
// 選擇所有復選框 $('input[type="checkbox"]') // 選擇指定 name 的復選框 $('input[name="check_name"]') // 選擇被選中的復選框 $('input[type="checkbox"]:checked') // 對被選擇的復選框進行操作 $('input[type="checkbox"]:checked').each(function() { console.log($(this).val()); });
以上代碼分別利用 jQuery 選擇器選擇了所有復選框、指定 name 的復選框、被選中的復選框,并進行了操作。其中選中復選框使用了屬性選擇器,同時用了偽類選擇器 :checked。對于被勾選的復選框,我們還可以使用 prop() 方法進行操作,如:
// 選中所有復選框 $('input[type="checkbox"]').prop('checked', true); // 取消選中所有復選框 $('input[type="checkbox"]').prop('checked', false); // 獲取第一個被選中的復選框 $('input[type="checkbox"]:checked:first').val();
以上代碼分別選中、取消選中所有復選框,并獲取第一個被勾選的復選框的值。prop() 方法的第一個參數是屬性名稱,第二個參數是屬性值。可以看出,jQuery 的選擇器功能非常強大,并且與 DOM 操作、屬性操作等功能相結合,可以方便地操縱網頁元素。