Question

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

结构就像这样

Main Radio 1
Main Radio 2

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

Main Radio 1
主要广播2
- Sub Radio 1
- Sub Radio 2

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

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

我想要实现的是，

单击主电台1时，我对子电台1或子电台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>

或查看fiddle。

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

This page has what you need

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);
});

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

查看此here

的小提琴

另外，请确保在包含此代码的<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;
            }
        }
    }
}

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

5 个答案: