在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'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'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's Super Center</option>
<option id="item_537" value="116:537" selected>116 Jay'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'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？
答案 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 （）。