在網頁中,復選框是常用的元素之一,而有些時候我們需要讓這些復選框只能選中其中的一個。這就需要用到一些jQuery的技巧。
首先,在HTML中設置一組復選框:
<label><input type="checkbox" name="check" value="1">選項1</label> <label><input type="checkbox" name="check" value="2">選項2</label> <label><input type="checkbox" name="check" value="3">選項3</label> <label><input type="checkbox" name="check" value="4">選項4</label>
其中,name屬性設置為“check”,表示這一組復選框是一組的。
然后,在jQuery中寫下以下代碼:
$(document).ready(function() { $('input[name="check"]').click(function() { // 點擊復選框時執行 $('input[name="check"]').not(this).prop('checked', false); // 將其他復選框取消選中狀態 }); });
這段代碼中,當復選框被點擊時,執行一個函數,使用not()方法將其他的復選框取消選中狀態。這里使用了prop()方法,將checked屬性設置為false。因為使用prop()方法比attr()方法更快,所以建議使用。
這樣,我們就可以保證這一組復選框只能選中其中一個了。