JQuery是一款非常優秀的JavaScript庫,在前端開發領域中被廣泛使用。而jQuery選擇器則是jQuery庫最常用的功能之一,可以方便地選取DOM中的元素,進行操作。
當我們需要在前端頁面中選擇多個選項時,通常會使用復選框(checkbox)的形式。而在處理選中的選項時,我們可以結合jQuery選擇器來完成傳值的操作。
HTML代碼:
<form>
<input type="checkbox" name="fruit" value="apple">蘋果<br>
<input type="checkbox" name="fruit" value="orange">橙子<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="button" value="確認" onclick="getChecked()">
</form>
JavaScript代碼:
function getChecked() {
var selectedFruits = [];
$("input[name='fruit']:checked").each(function() {
selectedFruits.push($(this).val());
});
alert("你選中了:" + selectedFruits.join(", "));
}
在上面的代碼中,我們先定義了一個getChecked()函數,在用戶點擊確認按鈕后調用這個函數。在這個函數中,我們定義了一個空數組selectedFruits,來存儲用戶選中的水果。然后,我們使用了jQuery選擇器$("input[name='fruit']:checked"),選中了所有被選中的水果復選框。
接著,我們使用了jQuery的each()方法,遍歷了這些已選中的復選框。在遍歷的過程中,我們通過$(this).val()獲取了當前復選框的value屬性值,也就是水果的名稱,然后將其加入到selectedFruits數組中。
最后,我們使用了數組的join()方法將selectedFruits數組中的所有水果名稱連接起來,作為提示信息彈出。這樣,就完成了復選框傳值的操作。
上一篇jquery選擇器里變量
下一篇jquery選擇器代碼