英文:
Is there an event triggered when a ratio button is checked?
问题
In JavaScript, 当单选按钮被选中时是否触发事件？可能的解决方案如下：
document.getElementById("radio1").addEventListener('change', () => {
// 当第一个单选按钮被选中时执行某些操作
})
你可以使用 "change" 事件来监听单选按钮的选中状态变化。
英文:
In JavaScript, is there an event triggered when a radio button is checked?
<input type="radio" name="radio" id="radio1">
<input type="radio" name="radio" id="radio2" checked>
<input type="radio" name="radio" id="radio3">
Is something like the following possible?
document.getElementById("radio1").addEventListener('checked', () => {
// Do something when the first radio button is checked
})
JSfidde: https://jsfiddle.net/Imabot/ko486uqe/2/
PLEASE read before answering or marking as duplicate. My question is not "How to run JS code when the radio button is checked". My question is "Is there an event triggered only when the radio button is checked", this is not exactly the same thing...
答案1
得分: 1
没有针对单选按钮的特殊事件。
没有针对*"radioChecked"*的特殊事件。
要测试checked状态，您需要自行处理。最好的方法是使用事件委托，检查元素目标是否为单选按钮元素，然后检查其checked属性：
addEventListener(`input`, (evt) => {
const elRadio = evt.target.closest(`[type="radio"]`);
if (!elRadio) return; // 不是单选按钮元素。什么也不做
console.log(`${elRadio.id} ${elRadio.checked}`);
});
虽然始终使用Event.target.closest()是一个好习惯，但在处理input等动作元素时，您也可以使用Element.matches()方法：
addEventListener(`input`, (evt) => {
if (!evt.target.matches(`[type="radio"]`)) return; // 什么也不做
console.log(`${evt.target.id} ${evt.target.checked}`);
});
英文:
There's no such special event for radio buttons only.
There's not such special event for "radioChecked".
To test the checked state you need to do it on your own.
The best would be to use event delegation, check if the element target is a Radio Element, and then go for its cehecked property:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
addEventListener(`input`, (evt) => {
const elRadio = evt.target.closest(`[type="radio"]`);
if (!elRadio) return; // Not a radio element. Do nothing
console.log(`${elRadio.id} ${elRadio.checked}`);
});
<!-- language: lang-html -->
<input type="radio" name="radio-group-one" id="radio-1">
<input type="radio" name="radio-group-one" id="radio-2" checked>
<input type="radio" name="radio-group-one" id="radio-3">
<!-- end snippet -->
Whilst using Event.target.closest() is always a good practice, you can also use the Element.matches() method when handling actionElements like input:
addEventListener(`input`, (evt) => {
if (!evt.target.matches(`[type="radio"]`)) return; // Do nothing
console.log(`${evt.target.id} ${evt.target.checked}`);
});
答案2
得分: -1
尝试这样做：
document.getElementById("radio1").addEventListener('change', () => {
if (document.getElementById("radio1").checked) {
// 当第一个单选按钮被选中时执行某些操作
console.log("radio1被选中");
}
});
英文:
Try this:
document.getElementById("radio1").addEventListener('change', () => {
if (document.getElementById("radio1").checked) {
// Do something when the first radio button is checked
console.log("radio1 checked");
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论