在HTML中設置input多選框非常簡單,只需要添加一個type屬性為“checkbox”的input元素即可:
<input type="checkbox" name="fruit" value="apple">蘋果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="orange">橙子
上面的代碼中,name屬性設置為“fruit”,表示這些多選框都屬于“fruit”組,value屬性則表示每個選項的值。
如果要預選某些選項,可以在對應的input元素中添加checked屬性:
<input type="checkbox" name="fruit" value="apple" checked>蘋果 <input type="checkbox" name="fruit" value="banana">香蕉 <input type="checkbox" name="fruit" value="orange" checked>橙子
上面的代碼中,蘋果和橙子這兩個選項會被預選中。
在Web開發中,有時需要使用JavaScript來操作多選框,可以通過修改input元素的checked屬性來實現選中或取消選中的效果:
let apple = document.querySelector('input[value="apple"]'); apple.checked = true; // 選中蘋果 apple.checked = false; // 取消選擇蘋果
上面的代碼中,首先通過document.querySelector()方法獲取value屬性為“apple”的input元素,然后分別設置其checked屬性為true或false來實現選中或取消選中的效果。
上一篇mysql函數亂碼