bs的前端radio单选选择后默认取消另一个,怎么实现?
时间: 2024-02-05 12:12:37 浏览: 21
可以通过给每个 radio 绑定一个相同的 `name` 属性,然后监听每个 radio 的 `change` 事件,在事件处理程序中取消其他 radio 的选择状态。
HTML 代码:
```html
<input type="radio" name="options" value="option1"> Option 1
<input type="radio" name="options" value="option2"> Option 2
```
JavaScript 代码:
```javascript
const radios = document.querySelectorAll('input[type="radio"][name="options"]');
for (let i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
// 取消其他 radio 的选择状态
for (let j = 0; j < radios.length; j++) {
if (radios[j] !== this) {
radios[j].checked = false;
}
}
});
}
```
以上代码会为名为 `options` 的 radio 组添加事件监听器,当其中一个 radio 被选中时,会取消其他 radio 的选择状态。
相关问题
bs的前端radio单选默认选择第一个选项,怎么实现?
在HTML中,可以使用`checked`属性来指定单选按钮的默认选项。例如:
```html
<label>
<input type="radio" name="gender" value="male" checked> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
```
在上面的例子中,单选按钮“Male”被默认选中,因为它具有`checked`属性。如果要将默认选项指定为其他单选按钮,请将`checked`属性添加到所需的单选按钮上。请注意,仅应将`checked`属性添加到单选按钮中的一个选项上,否则所有选项都将被默认选中。
bs的前端radio单选怎么实现?
在 HTML 中使用 `<input type="radio">` 标签来创建单选框。每个单选框必须有一个唯一的 `name` 属性,以便在同一组中进行区分。可以通过 `value` 属性来设置每个单选框的值。
下面是一个简单的例子:
```html
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
```
在这个例子中,有两个单选框,它们的 `name` 属性都是 "gender",所以它们属于同一组。如果用户选择其中一个选项,那么另一个选项将自动取消选择。选中的选项的值将被提交给服务器。在这个例子中,如果用户选择了第一个选项,那么提交的值将是 "male",如果选择了第二个选项,那么提交的值将是 "female"。