多選框(Checkbox)在表單中常常被用到,用來選擇多個選項或提交多個值。在使用jQuery時,設置多選框的狀態可以簡單地通過設置checked屬性來實現。
<input type="checkbox" name="fruit" value="apple">蘋果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="pear">梨子
上面的代碼展示了一個簡單的多選框列表,它們的name屬性相同但value屬性不同。若我們需要將所有多選框全部設為選中狀態,可以使用以下代碼:
$("input[name='fruit']").prop("checked", true);
prop()方法用于設置或返回匹配元素的屬性值。在這里,我們將所有name屬性為fruit的復選框的checked屬性設置為true,即選中狀態。
如果我們需要在代碼中確定哪些多選框被選中了,可以使用is()方法來判斷:
$("input[name='fruit']").each(function() { if ($(this).is(":checked")) { console.log($(this).val() + "被選中了"); } });
上述代碼使用each()方法遍歷所有name屬性為fruit的多選框,依次判斷是否被選中,若是則輸出其值。
當然,我們也可以通過removeAttr()方法來取消選擇:
$("input[name='fruit']").removeAttr("checked");
這個方法將移除所有name屬性為fruit的多選框中的checked屬性,即取消選擇。
下一篇css中將div浮動