input单选组radio,点击事件
封面图
•
2025-11-01
•
jQuery
277
0
0
0
在 HTML 和 JavaScript 中,`<input type="radio">` 是用于创建单选按钮的元素。当用户点击某个单选按钮时,可以通过 JavaScript 监听其 `click` 事件或 `change` 事件来执行相应的操作。 --- ### ✅ 示例:使用 `click` 事件 ```html <input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label> <script> const maleRadio = document.getElementById('male'); const femaleRadio = document.getElementById('female'); maleRadio.addEventListener('click', function() { console.log('Male selected'); }); femaleRadio.addEventListener('click', function() { console.log('Female selected'); }); </script> ``` --- ### ✅ 示例:使用 `change` 事件(推荐) `change` 事件通常在用户选择一个选项后触发,适用于表单控件,包括单选按钮。 ```html <input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label> <script> const radios = document.querySelectorAll('input[name="gender"]'); radios.forEach(radio => { radio.addEventListener('change', function() { if (this.checked) { console.log('Selected: ' + this.value); } }); }); </script> ``` --- ### 📌 注意事项: - 使用 `name` 属性将多个单选按钮分组,确保只能选一个。 - `change` 事件比 `click` 更可靠,因为 `click` 可能会在用户取消选择时也触发。 - 如果你需要获取当前选中的值,可以遍历所有同名的单选按钮,检查哪个是 `checked` 的。 --- ### ✅ 获取当前选中值的示例: ```javascript const selectedValue = document.querySelector('input[name="gender"]:checked').value; console.log('Selected value:', selectedValue); ``` --- 如果你使用的是前端框架(如 Vue、React、Angular),监听单选按钮的点击事件方式会略有不同,欢迎告诉我你用的框架,我可以提供更具体的示例。
上一篇:
javascript 转义字符
下一篇:
linux history命令详解,如何在history命令时查看历史命令执行时间?
标题录入,一次不能超过6条
留言
评论