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

时间:2017-07-22 20:19:41

标签: javascript jquery angularjs pug

因此,以下列方式有一些单选按钮

第1节

Radio1 Radio2 Radio3

SECTION2

Radio4 Radio5

SECTION3

Radio6 Radio7 Radio8 Radio9

假设选择了Radio2。现在我必须立即隐藏整个 SECTION3 单选按钮。我该如何实现呢?目前存在的代码是:

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

此处名称 SECTION1 SECTION2 等来自属性,而单选按钮的名称来自对象[属性]中的x

非常感谢任何帮助。提前谢谢。

更新

这里我只是在选择了一个部分的特定单选按钮时,我试图隐藏单选按钮的另一部分。如果选择了第1部分的单选按钮2,则只能隐藏第3部分。如果选择了第2部分的单选按钮3,则也隐藏第4部分。

1 个答案:

答案 0 :(得分:0)

假设您有类似这样的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();
    });    
}