显示选定的单选按钮并隐藏所有其他单选按钮答案

【问题标题】：show the selected radio button and hide all others显示选定的单选按钮并隐藏所有其他单选按钮
【发布时间】：2015-10-19 20:36:08
【问题描述】：

我正在尝试使选中的单选按钮隐藏所有未选中的单选按钮？我的想法是首先选择单选按钮，然后取消选择其他每个按钮及其 id。但除此之外还有什么办法吗？（我认为获取每个 id 并取消选择有点麻烦）

这是我的html

<form>
      <group class="inline-radio">
        <div>
          <input id="opt1" type="radio" name="title">
          <label>opt1</label>
        </div>
        <div>
          <input id="opt2" type="radio" name="title" checked>
          <label>opt2</label>
        </div>
        <div>
          <input id="opt3" type="radio" name="title">
          <label>opt3</label>
        </div>
        <div>
          <input id="opt4" type="radio" name="title">
          <label>opt4</label>
        </div>
        <div>
          <input id="opt5" type="radio" name="title">
          <label>others</label>
        </div>
      </group>

</form>

项目在codepen http://codepen.io/flyingboy007/pen/ojoVWe

【问题讨论】：

在这种情况下，您的用户应该如何更改他们选择的选项？另外，请在您的问题中发布您的 JavaScript（和您的 minimal reproducible example）这里；不要指望人们会为了帮您一个忙而在互联网上闲逛。顺便说一句，没有<group> 元素；您可能正在考虑 - 或打算使用 - <fieldset>。此外，<label> 意味着与给定的<input>（等）元素相关联，无论该元素嵌套在<label> 中还是由for 属性标识。
我没有。我只需要基于提供的 html 的一些建议。这样我就可以编写 jquery 部分了
那么我认为您的网站倒退了；你应该尝试实施一个解决方案，如果尝试的解决方案不起作用或以某种方式失败，然后寻求帮助（解释它应该做什么，它不等）。
我心中明确提到的解决方案。但我不认为这是最好的方法，这就是我没有实施它的原因。并将其发布在这里以获得一些见解..

标签： jquery html css radio-button

【解决方案1】：

您可以使用以下方法隐藏未选择的收音机：-

$('input[type="radio"]').not(':checked').hide();

你可以隐藏未选中的电台标签的使用

$('input[type="radio"]').not(':checked').siblings('label').hide();

虽然你应该在标签上使用for。

编辑

要更具体地针对该组，请使用：-

$('group.inline-radio').find('input[type="radio"]').not(':checked').hide();

$('group.inline-radio').find('input[type="radio"]').not(':checked').siblings('label').hide();

或为收音机和标签链接

$('group.inline-radio').find('input[type="radio"]').not(':checked').hide().siblings('label').hide();

【讨论】：

只是一个简单的疑问..我希望选定的单选按钮浮动到左侧（代替第一个单选按钮），同时隐藏其他单选按钮。有没有可用的 jquery 方法？？
使用 css - float:left;输入/标签周围的容器 div 具有阻止它们向左移动的宽度。在标签而不是容器上设置宽度。

【解决方案2】：

试试：

$('input ').on('click',function(){
    $('input').not($(this)).hide();
});

单击时选择除所选输入之外的所有输入并隐藏它们

【讨论】：

请花时间解释它是如何工作的，以便 OP 以及未来的访问者能够从中学到一些有用的东西。