如何根据之前选择的单选按钮动态隐藏单选按钮？答案

【问题标题】：How to dynamically hide the radio buttons based on the previously selected radio buttons?如何根据之前选择的单选按钮动态隐藏单选按钮？
【发布时间】：2017-07-22 20:19:40
【问题描述】：

所以，有一些单选按钮的方式如下

第 1 部分

收音机 1 收音机 2 收音机 3

第 2 节

Radio4 Radio5

第 3 节

Radio6 Radio7 Radio8 Radio9

假设 Radio2 被选中。现在我必须立即隐藏整个 SECTION3 单选按钮。我应该如何实现这个？目前存在的代码是：

.form-group(ng-repeat="attribute in object.attributes" style="position: relative; float: left;")
    label.control-label {{属性}}
    ul.option 列表
          li(ng-repeat="x in object[attribute] | orderBy: 'x'")
              。收音机
                  标签
                      input.btn(type="radio", ng-model="product[attribute]", ng-value="x", ng-selected)
                      | {{X}}

这里的名称SECTION1、SECTION2等来自属性，而单选按钮的名称来自对象[attribute]中的x

任何帮助将不胜感激。提前致谢。

更新：

在这里，只有在选择一个部分的特定单选按钮时，才能隐藏无线按钮的其他部分。如果选择第 1 部分的单选按钮 2，则只有第 3 部分必须隐藏。如果选择了第 2 节的单选按钮 3，则也隐藏第 4 节。

【问题讨论】：

在此处显示您的 html
@RAUSHANKUMAR 我没有特别的 HTML。但我正在使用 Pug/Jade。我应该将我的 Pug/Jade 文件转换为 HTML 并提供给您吗？
@psvs 这是你想要做的吗？ codepen.io/anon/pen/EvYObO
有点类似。在这里，我试图仅在选择一个部分中的特定单选按钮时隐藏单选按钮的另一部分。如果选择第 1 部分的单选按钮 2，则只有第 3 部分必须隐藏。如果选择了第 2 节的单选按钮 3，则也隐藏第 4 节

标签： javascript jquery angularjs pug

【解决方案1】：

假设你有一个这样的 HTML

<div id='firstSection'>
    <input type='radio' name='sectionOne' value='Radio 1' /> 
    <input type='radio' name='sectionOne' value='Radio 1' />
    <input type='radio' name='sectionOne' value='Radio 1' />
</div>

<hr/>

<div id='secondSection'>
    <input type='radio' name='sectionOne' value='Radio A' /> 
    <input type='radio' name='sectionOne' value='Radio B' />
    <input type='radio' name='sectionOne' value='Radio C' />
</div>

然后你需要在你的 javascript 中使用如下函数。

    function HideSection(){

    $('input:radio').change(function(e){
        // get the id of element to hide
        var selectedSectionId = $(this).parent().attr('id')
        var sectionToHide;
        if(selectedSectionId.indexOf('first') != -1)
         sectionToHide = selectedSectionId.replace('first','second');
        else
         sectionToHide = selectedSectionId.replace('second','first');
        // hide the element
        $('#' + sectionToHide).hide();
    });    
}

【讨论】：