如何基于先前选择的单选按钮动态隐藏单选按钮？

Question

So, there are some sections of radio buttons in the following way

SECTION 1

Radio1 Radio2 Radio3

SECTION2

Radio4 Radio5

SECTION3

Radio6 Radio7 Radio8 Radio9

Let's say Radio2 is selected. Now I'll have to hide the whole SECTION3 radio buttons instantly. How should I implement this? The code that currently exists is:

.form-group(ng-repeat="attribute in object.attributes" style="position: relative; float: left;")
    label.control-label {{attribute}}
    ul.option-list
          li(ng-repeat="x in object[attribute] | orderBy: 'x'")
              .radio
                  label
                      input.btn(type="radio", ng-model="product[attribute]", ng-value="x", ng-selected)
                      | {{x}}

Here the names SECTION1 , SECTION2 etc come from attribute, while the names of the radio buttons come from the x in object[attribute]

Any help would be much appreciated. Thanks in advance.

UPDATE:

Here I am trying to hide the other section of radio buttons only if a particular radio button from one section is selected. If Radio button 2 of section 1 is selected, then only section 3 must be hidden. If Radio button 3 of section 2 is selected, then hide section 4 also.

Answer 1

Lets say you have an HTML like this

<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>

Then you'll need a function like below in your 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();
    });    
}