淘先锋技术网

首页 1 2 3 4 5 6 7

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

这样,我们就可以保证这一组复选框只能选中其中一个了。