如果单选按钮不可见，请取消选中它

Posted 2023-05-08

【中文标题】如果单选按钮不可见，请取消选中它

【英文标题】：Uncheck radio button if it is not visible

【发布时间】：2021-11-16 04:44:04

【问题描述】：

第一组按钮切换第二组。

但是，如果有人检查 rbtn1，然后检查 rbtn3，但随后改变主意单击 rbtn2 但将 rbtn4 留空，则即使不可见，仍会单击 rbtn3。如果第一组有变化，我正在尝试取消选中第二组比率按钮，但我在 onclick 中的代码无效。这样的代码可以在onclick中吗？

  <asp:RadioButton ID="rbtn1" onclick="$('#spanOne').show(); onclick="$('#spanTwo').hide(); 
  $('rbtn3').checked = false; "/>

  <asp:RadioButton ID="rbtn2" onclick="$('#spanOne').hide(); onclick="$('#spanTwo').show(); 
  $('rbtn4').checked = false;"/>


<span id = "spanOne"> 
<asp:RadioButton ID="rbtn3" />
</span>

<span id = "spanTwo"> 
<asp:RadioButton ID="rbtn4" />
</span>

【问题讨论】：

你能不能写onClientClick而不是onClick方法。如果是 runat="server"

，asp.net 也会生成自己的 id

如果你可以看到语法高亮，你可以看到你的第二个“onclick=”被绿色高亮，因为它是双引号引用的字符串的一部分。在那之后，" 关闭了该属性，其余的 javascript 突出显示错误。查找字符串分隔符和转义字符串。这又带来了第二个问题，你的脚本中不能有 onclick=，因为它不是 javascript 而是 html 属性。

如果您在minimal reproducible example 中发布 RENDERED HTML，我们可以为您提供更好的帮助。你可以从容器中委托

【参考方案1】：

请委托 - 将无线电包装在静态容器中。

还要给所有的收音机起相同的名字，否则它们就不是收音机了。

const rads = $("#staticContainer input[type=radio]"); // or [name=rbtn] if you give them that name
$("#staticContainer").on("click","input[type=radio]",function() 
  $(rads).each(function() 
    if (!$(this).is("visible")) $(this).val("") 
  )
)

【讨论】：

我在页面上还有其他与此无关的单选按钮。这不会影响他们吗？

如果您将它们包装起来和/或使用名称，则不会

【参考方案2】：

如果您定义 asp 控件，则需要该控件的 runat 属性。如果控件已运行，则 id 将动态生成。要访问该动态 id，您可以编写 "[id$=your acual control name]" 。如果您将 rbtn1,rbtn2 视为组，则最好添加 GroupName 以仅从这两个中选择一个。最后使用下面的代码作为解决方案。

<asp:RadioButton ID="rbtn1" GroupName="firstset" Text="rbtn1" onclick="$('#spanOne').show();$('#spanTwo').hide(); $('[id$=rbtn3]').prop( 'checked', false);" runat="server" />

<asp:RadioButton ID="rbtn2" GroupName="firstset" Text="rbtn2" onclick="$('#spanOne').hide(); $('#spanTwo').show(); $('[id$=rbtn4]').prop( 'checked', false);" runat="server" />


<span id="spanOne">
    <asp:RadioButton ID="rbtn3" runat="server" Text="rbtn3" />
</span>

<span id="spanTwo">
    <asp:RadioButton ID="rbtn4" Text="rbtn4" runat="server" />
</span>