如何使用jQuery隐藏所有下一个“fieldset”元素?

时间:2015-12-03 23:27:53

标签: javascript jquery html html5

在HTML表单中,我有许多fieldset元素。

每次收音机/复选框/选择输入改变时,我想看看是否有一个名为“终结者”的自定义HTML5属性。如果该属性存在且值为==“是”,我希望隐藏当前fieldset之后的所有fieldset

这是我的HTML代码“如果需要”

<div class="panel panel-default " id="question_8">
    <div class="panel-heading">1:b) What is the closest store to you home?</div>
    <div class="panel-body">
        <fieldset class="survey-control-fieldset" id="wrapper_111">
            <div class="survey-control-title"> Select a store </div>
            <!-- Open New Row -->
            <div class="row">
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_34">
                            <input type="radio" name="control_111" id="item_34" value="111:34"> Larson LLC </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_210">
                            <input type="radio" name="control_111" id="item_210" value="111:210"> Waelchi, Ryan and Wunsch </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_239">
                            <input type="radio" name="control_111" id="item_239" value="111:239"> McGlynn, Hamill and Shields </label>
                    </div>
                </div>
                <!-- Cell Closed -->
            </div>
            <!-- Row Closed -->
            <!-- Open New Row -->
            <div class="row">
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_391">
                            <input type="radio" name="control_111" id="item_391" value="111:391"> Hessel, Blick and Schiller </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_423">
                            <input type="radio" name="control_111" id="item_423" value="111:423"> Beatty-Schaefer </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_596">
                            <input type="radio" name="control_111" id="item_596" value="111:596"> Paucek-Kunze </label>
                    </div>
                </div>
                <!-- Cell Closed -->
            </div>
            <!-- Row Closed -->
            <!-- Open New Row -->
            <div class="row">
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_684">
                            <input type="radio" name="control_111" id="item_684" value="111:684"> Johns, Oberbrunner and Pfannerstill </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_688">
                            <input type="radio" name="control_111" id="item_688" value="111:688"> Johns, Hamill and Senger </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_859">
                            <input type="radio" name="control_111" id="item_859" value="111:859"> Romaguera, Hayes and Bradtke </label>
                    </div>
                </div>
                <!-- Cell Closed -->
            </div>
            <!-- Row Closed -->
            <!-- Open New Row -->
            <div class="row">
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_860">
                            <input type="radio" name="control_111" id="item_860" value="111:860"> Goyette, Gerhold and Schulist </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_529">
                            <input type="radio" name="control_111" id="item_529" value="112:529" checked> None </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_530">
                            <input type="radio" name="control_111" id="item_530" value="112:530"> Don&#039;t Know/No Answer </label>
                    </div>
                </div>
                <!-- Cell Closed -->
            </div>
            <!-- Row Closed -->
            <!-- Open New Row -->
            <div class="row">
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_532">
                            <input type="radio" name="control_111" id="item_532" value="112:532"> Other </label>
                        <div class="control_111 hiddenGroup " id="group_112_532">
                            <div class="form-group ">
                                <label for="control_113">Specify Other Store Name</label>
                                <input placeholder="" class="form-control" name="control_113" type="text" value="" id="control_113"> </div>
                        </div>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4">
                    <div class="radio">
                        <label for="item_531">
                            <input type="radio" name="control_111" id="item_531" value="112:531" data-terminator="Yes"> Refused </label>
                    </div>
                </div>
                <!-- Cell Closed -->
                <!-- Open New Cell -->
                <div class="col-xs-6 col-md-4"> </div>
                <!-- Cell Closed -->
            </div>
            <!-- Row Closed -->
        </fieldset>
    </div>
</div>
<div class="panel panel-default " id="question_9">
    <div class="panel-heading">1:c) Pick you favorit stores</div>
    <div class="panel-body">
        <fieldset class="survey-control-fieldset" id="wrapper_114">
            <div class="survey-control-title"> Stores </div>
            <select class="form-control" name="control_114[]" id="control_114" multiple>
                <option id="item_34" value="114:34">Larson LLC</option>
                <option id="item_210" value="114:210">Waelchi, Ryan and Wunsch</option>
                <option id="item_239" value="114:239">McGlynn, Hamill and Shields</option>
                <option id="item_391" value="114:391">Hessel, Blick and Schiller</option>
                <option id="item_423" value="114:423">Beatty-Schaefer</option>
                <option id="item_596" value="114:596">Paucek-Kunze</option>
                <option id="item_684" value="114:684">Johns, Oberbrunner and Pfannerstill</option>
                <option id="item_688" value="114:688">Johns, Hamill and Senger</option>
                <option id="item_859" value="114:859">Romaguera, Hayes and Bradtke</option>
                <option id="item_860" value="114:860">Goyette, Gerhold and Schulist</option>
                <option id="item_533" value="115:533" selected>115 Jay&#039;s Wireless</option>
                <option id="item_534" value="115:534" selected>115 Ajs Alterations</option>
                <option id="item_535" value="115:535">115 Check Box Signs</option>
                <option id="item_536" value="115:536">115 Jace&#039;s Super Center</option>
                <option id="item_537" value="116:537" selected>116 Jay&#039;s Wireless</option>
                <option id="item_538" value="116:538" selected>116 Ajs Alterations</option>
                <option id="item_539" value="116:539">116 Check Box Signs</option>
                <option id="item_540" value="116:540">116 Jace&#039;s Super Center</option>
            </select>
        </fieldset>

这是我尝试过的,下面的代码会在控制台上打印“是”或“否”,但它不会像我期望的那样隐藏所有字段集

$("input[type='radio'],input[type='checkbox'],select").change(function(e) {

        //Get the shared class name which has the same name at the "name" attribute of the radio control
        var isTerminator = $(this).data('terminator') || 'No';
        console.log(isTerminator);
        //Hide all groups that have the class equal to className
        if(isTerminator == 'Yes'){
            $( this ).nextAll('fieldset').hide().addClass('terminated');
        } else {
            $( this ).show().removeClass('terminated');
        }

    });

在上面的示例中,如果选择了id =“item_531”的元素,那么fieldset下面的id =“wrapper_111”应该隐藏。

如何隐藏所有下一个字段集elements

1 个答案:

答案 0 :(得分:1)

.nextAll('fieldset')直接在DOM中的当前字段集之后查找字段集。因为在您的HTML中,您的字段集嵌套在某些DIV中,它不再找到它并返回长度为0的列表。

我不确定你想要实现的目标,但你可以尝试找到父div(例如使用类面板),然后使用nextAll()来获取其他面板然后使用这些面板找到字段集并隐藏它们。 E.g。

$(this).parents(".panel").nextAll().find("fieldset").hide().addClass('terminated');

否则,您需要更改HTML以在DOM中创建字段集兄弟。另一件需要考虑的事情是,您的班级已终止可能有css display:none ,然后添加和删除该类意味着您不需要.hide()和.show ()。