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

Question

我想让选中的单选按钮隐藏所有未选中的单选按钮？。我的想法是首先选择单选按钮，然后取消选择其他每个带有 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

Answer 1

尝试：

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

单击 select 除了 select 编辑的所有输入并隐藏它们

Answer 2

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

$('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();

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

show the selected radio button and hide all others

html

css

jquery

radio-button