radio按钮选中给对应的input设置name属性
时间: 2024-03-06 13:50:05 浏览: 145
jQuery获取选中单选按钮radio的值
5星 · 资源好评率100%
当用户选中radio按钮时,可以使用JavaScript来给对应的input设置name属性。可以通过以下步骤实现:
1. 首先,获取radio按钮组和input元素的引用。
2. 然后,使用addEventListener()方法监听radio按钮组的change事件。
3. 在事件处理程序中,使用if语句检查哪个radio按钮被选中。
4. 最后,使用JavaScript的setAttribute()方法将对应input元素的name属性设置为所选的radio按钮的name属性。
以下是示例代码:
HTML代码:
```html
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<label>
<input type="radio" name="gender" value="female">
Female
</label>
<input type="text" id="gender-input">
```
JavaScript代码:
```javascript
const radioGroup = document.getElementsByName('gender');
const genderInput = document.getElementById('gender-input');
radioGroup.forEach(radio => {
radio.addEventListener('change', () => {
if (radio.checked) {
genderInput.setAttribute('name', radio.getAttribute('name'));
}
});
});
```
这样,当用户选择一个radio按钮时,对应的input元素的name属性就会被设置为所选的radio按钮的name属性。
阅读全文