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