如何隐藏所有下一个"字段集“;元素使用jQuery
How to hide all the next "fieldset" elements using jQuery?
在HTML表单中，我有许多fieldset元素。
每次单选/复选框/选择输入更改时，我都想看看是否有一个名为"terminator"的自定义HTML5属性。如果该属性存在并且值="Yes"，我想隐藏当前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"的元素，那么id="wrapper_111"下面的fieldset应该隐藏起来。
如何隐藏所有下一个字段集elements？
.nextAll（'fieldset'）直接在DOM中的当前字段集之后查找字段集。因为在HTML中，字段集嵌套在一些DIV中，所以它再也找不到，并返回一个长度为0的列表。
我不确定你到底想实现什么，但你可以尝试找到父div（例如，用类面板），然后nextAll（）来获取其他面板，然后用这些面板找到字段集并隐藏它们。例如
$(this).parents(".panel").nextAll().find("fieldset").hide().addClass('terminated');
否则，您将需要更改HTML，使字段集成为DOM中的同级字段集。另一件需要考虑的事情是，您的类终止可以有css显示：none，然后添加和删除该类意味着您不需要.hide（）和.show（）。
相关文章：
- 可以't附加html元素jquery
- 循环遍历元素jquery选择器
- 在ajax加载的元素jquery上包含现有的jquery函数
- 如何删除元素列表中的类并添加到另一个元素 Jquery.
- 获取单击的类元素 jQuery 的名称值
- 获取上一个元素 jQuery 的内容
- 根据另一个元素的更改获取一个元素(jquery）
- 区分不同的可拖放元素(jQuery 拖放）
- 除了最后一个<td>元素-Jquery
- 获取子元素jQuery的单选按钮值
- 捕获元素jquery外部的mousedown事件
- .append到非DOM元素jQuery
- 获取其父元素的精确子元素.Jquery
- 获取重复结构中的特定元素jquery
- 捕获隐藏输入元素jQuery的值
- 使用onclick函数获取点击的元素jquery
- 返回父元素 jquery 中的输入值
- 按属性查找元素 jQuery
- 选择元素 jQuery
- 按子元素 - jQuery 的数据 ID 对 li 进行排序
