如何重置/取消单选按钮点击事件？

Question

我有两个单选按钮和两个组。

结构是这样的

1. 主无线电1
2. 主无线电2

在主广播2下，还有两个子单选按钮。

1. 主无线电1
2. 主无线电2
   • 次级无线电1
   • 次级无线电2

​

我所做的是，在默认的阶段，它将只显示主电台1和主收音机2按钮。当选择主广播2时，将出现主广播2的两个子单选按钮。

当选择回主广播1时，它将隐藏主广播2的列表。

我想要实现的是，

当单击主广播1时，我为Sub Radio 1或Sub Radio 2所做的选择也希望被取消/重置。

我试过这个javascript，但没有成功。

document.getElementById("subradiobuttons").reset(); 

请帮我解决这个问题。谢谢。

关于这一点，

Answer 1

我认为，对于这样一个简单的任务，最好的方法并不需要像jQuery这样的完整的jQuery库。

​

document.getElementById("main2").addEventListener("click", function()
{
    document.getElementById("subCheckButtons").style.opacity = 1;
}, false);
document.getElementById("main1").addEventListener("click", function()
{
    document.getElementById("subCheckButtons").style.opacity = 0;
    document.getElementById("sub1").checked = false;
    document.getElementById("sub2").checked = false;
}, false);

<input type="radio" id="main1" name="main" />
<input type="radio" id="main2" name="main" />
<div id="subCheckButtons" style="opacity:0;">
    <input type="radio" id="sub1" name="sub" class="subCheck" />
    <input type="radio" id="sub2" name="sub" class="subCheck" />
</div>

​

或者去看小提琴。

Answer 2

这是另一种方法，如果有人点击“主收音机1”，将所有输入重置到他们的默认位置。

//Clear all inputs.
function clearInputs(form) {
    "use strict";

    //Gather all inputs within selected form.
    const inputs = form.querySelectorAll("input");

    //Clear the inputs.
    inputs.forEach(function (input) {
        if (input.hasAttribute("checked") === true) {
            input.checked = true;
        } else {
            input.checked = false;
        }
    });
}

//Monitor "Main Radio 1" for clicks.
function monitorMainRadio1() {
    "use strict";

    const form = document.getElementById("form");
    const mainRadio1 = document.getElementById("main-radio1");

    mainRadio1.addEventListener("click", function () {
        clearInputs(form);
    });
}

//Invoke the monitorMainRadio1 function.
monitorMainRadio1();

Answer 3

没测试过但是..。

<input type="radio" onclick="document.getElementById("subradiobuttons").Checked = false;" />

或者您可以调用Javascript函数来做更多的工作/逻辑。

这一页有你需要的东西