假设我有4个复选框:
<form name="form" action="">
<input type="checkbox" name="one" value="1" data-target="sub">1
<br>
<input type="checkbox" name="two" value="2" class="hidden sub">2
<br>
<input type="checkbox" name="three" value="3" class="hidden sub" data-target="subsub">3
<br>
<input type="checkbox" name="four" value="4" class="hidden subsub">4
</form>
<style>
.hidden {
display:none;
}
</style>
<script>
$('input').change(function(){
var that = $(this);
var data = that.data('target');
if(data) {
that.parent('form').children("."+data).toggleClass('hidden');
}
</script>
第一次检查时。第2个和第3个变为可见(toggleClass("隐藏"))。这很简单。但当您选中第三个时,第四个必须可见(toggleClass('hidden')。第二个没有任何视觉效果。
问题是:当您取消选中第一个复选框时,3个复选框必须变为不可见,即使第四个复选框通过选中第三个复选框可见。
我真的不明白,只有隐藏类怎么可能?
JSFIDDLE此处
编辑
这必须是一个普遍的解决方案。我生成HTML,并希望使用通用javascript来解决这个问题,而无需在脚本中写入特定的名称(变量)。我唯一能做的就是不同级别的课程。所以只适用于组(1),(2,3),(4)。
我也不能使用复选框的值,因为复选框可以被选中也可以不被选中,并且仍然必须隐藏一个元素。这里没有线性。。。
您可以在使用.trigger('change')
时检查输入.is(':checked')
和使用.hide()
和.show()
。这样你就可以保留你原来的HTML结构
演示:http://jsfiddle.net/2m2w2hkp/1/
$(document).ready(function() {
$('input').change(function(){
var that = $(this);
console.log(that.data('target'));
var data = that.data('target');
if(data) {
data = "."+data;
if (that.is(':checked')) {
that.parent('form').children(data).show();
}
else {
that.parent('form').children(data).prop('checked', false);
that.parent('form').children(data).trigger('change');
that.parent('form').children(data).hide();
}
}
console.log(data);
});
});
如果.find()是顶级的(添加ID或使用数据目标),你能使用它吗?
类似于(如果顶部复选框的id为"checkbox1":
if (that.attr("id") == "checkbox1")
{
that.parent("form").find("input").each(function(){
if ($(this).attr("id") != "checkbox1")
{
$(this).addClass("hidden");
}
});
}
在不测试它的情况下,如果checkbox1被选中,它会将"隐藏"类添加到表单中的所有输入元素,而不会将其添加到"checkbox1"