如何重置/取消选中单选按钮onclick事件? [英] How to reset/uncheck radio button onclick event?
问题描述
我有2个单选按钮,分为2组.
I have 2 radio button with 2 group.
结构是这样的
- 主广播1
- 主电台2
在主电台2下,还有两个子单选按钮.
Under Main Radio 2, there's two more sub radio button.
- 主广播1
- 主电台2
- 副电台1
- 第二广播电台
- Main Radio 1
- Main Radio 2
- Sub Radio 1
- Sub Radio 2
我在做什么,在默认阶段,它将仅显示Main Radio 1和Main Radio 2按钮.当选择主要电台2,主营广播的两个子单选按钮2出现.
What am I doing is, in default stage, it will only show Main Radio 1 and Main Radio 2 button. When choose Main Radio 2, two sub radio button of Main Radio 2 appear.
选择返回主广播1时,它将隐藏主广播2的列表.
When choose back to Main Radio 1, it will hide the list of Main Radio 2.
我想要实现的是,
当单击Main Radio 1时,我对Sub Radio 1或Sub Radio 2所做的选择也要取消选中/重置.
When click Main Radio 1, the selection that I made for Sub Radio 1 or Sub Radio 2, want to be uncheck / reset too.
我尝试使用此javascript,但未成功.
I tried with this javascript, but no success.
document.getElementById("subradiobuttons").reset();
请帮助我解决方案.谢谢.
Please kindly help me the solutions. Thank you.
谨此问候
推荐答案
我认为,完成此类简单任务的最佳方法不需要像jQuery这样的完整JavaScript库.
I think the best approach for a simple task like this does not needs a full JavaScript library like 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>
或参见小提琴.
这篇关于如何重置/取消选中单选按钮onclick事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!