在网页中,复选框是常用的元素之一,而有些时候我们需要让这些复选框只能选中其中的一个。这就需要用到一些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()方法更快,所以建议使用。
这样,我们就可以保证这一组复选框只能选中其中一个了。