如何重置/取消选中单选按钮 onclick 事件？

Question

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

结构是这样的

1. 主收音机 1
2. 主收音机 2

在 Main Radio 2 下，还有两个子单选按钮。

1. 主收音机 1
2. 主收音机 2
   • 副收音机 1
   • 副收音机 2

我在做什么，在默认阶段，它只会显示主收音机 1 和主收音机 2 按钮。 选择主收音机 2 时，会出现主收音机 2 的两个子单选按钮。

选择返回主电台1时，它将隐藏主电台2的列表。

我想要达到的目标是，

当单击 Main Radio 1 时，我为 Sub Radio 1 或 Sub Radio 2 所做的选择也想取消选中/重置。

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

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

请帮助我解决问题。 谢谢你。

带着敬意，

Answer 1

我认为像这样的简单任务的最佳方法不需要像 jQuery 这样的完整 JavaScript 库。

 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 函数来做更多的工作/逻辑

这个页面有你需要的

Answer 4

使用 jQuery 执行此操作比使用 JavaScript 快得多。 我建议你做这样的事情；

给收音机盒这样的东西

<input type="radio" name="main1">
<input type="radio" name="main2">
    <input type="radio" name="sub">
    <input type="radio" name="sub">​

然后用 jQuery 你可以做到这一点

$('input[name=main1]').on('click', function() {
    $('input[name=sub]').attr('checked', false);
});

我在这里假设您已经找到了一种隐藏子单选按钮的方法。

在这里看到一个小提琴

另外，请确保在包含此代码的<script></script>标记的顶部包含 jQuery。

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

Answer 5

重置表单中的单选按钮或RadiobuttonList ：

private void ResetFormControlValues(Control parent)
{
    foreach (Control c in parent.Controls)
    {
        if (c.Controls.Count > 0)
        {
            ResetFormControlValues(c);
        }
        else
        {
            switch ((c.GetType().ToString()))
            {
                case "System.Web.UI.WebControls.TextBox":
                    ((TextBox)c).Text = "";
                    break;
                case "System.Web.UI.WebControls.CheckBox":
                    ((CheckBox)c).Checked = false;
                    break;
                case "System.Web.UI.WebControls.RadioButton":
                    ((RadioButton)c).Checked = false;
                    break;
                case "System.Web.UI.WebControls.DropDownList":
                    ((DropDownList)c).SelectedIndex = 0;
                    break;
            }
        }
    }
}