【发布时间】：2019-02-14 14:32:48
【问题描述】：
请原谅我的任何坏习惯，我已经玩了 48 小时的 html 和 jquery。
我正在尝试根据选中的复选框隐藏/取消隐藏输入字段。如果选中“无”框，则隐藏所有字段。
我在以下代码显示输入字段时遇到问题，直到复选框被选中/取消选中一次。然后他们开始表现得像他们应该的那样。我也可以通过取消选中其他框来使“无”框工作，但这不会像我希望的那样触发字段隐藏。
有什么建议吗？
TLDR：在选中相应的框之前，不应看到 DIV 字段。如果选中“无”框，则所有 DIV 字段都应消失。
$('#checkboxes-0').change(function() {
if (this.checked)
$('#blank_co').fadeIn('slow');
else
$('#blank_co').fadeOut('slow');
});
$('#checkboxes-1').change(function() {
if (this.checked)
$('#fresh_co').fadeIn('slow');
else
$('#fresh_co').fadeOut('slow');
});
$('#checkboxes-2').change(function() {
if (this.checked)
$('#marine_co').fadeIn('slow');
else
$('#marine_co').fadeOut('slow');
});
$('#checkboxes-3').change(function() {
if (this.checked)
$('#rain_co').fadeIn('slow');
else
$('#rain_co').fadeOut('slow');
});
var $others = $('input[name="checkboxes"]').not('#checkboxes-4')
$('#checkboxes-4').change(function() {
if (this.checked) {
$others.prop('checked', false)
}
});
$others.change(function() {
if (this.checked) {
$('#checkboxes-4').prop('checked', false)
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes">
Select any desired backgrounds:</label>
<div class="col-md-4">
<label class="checkbox-inline" for="checkboxes-0">
<input name="checkboxes" id="checkboxes-0" type="checkbox" value="blanks">
Blanks
</label>
<label class="checkbox-inline" for="checkboxes-1">
<input name="checkboxes" id="checkboxes-1" type="checkbox" value="fresh">
Fresh Water
</label>
<label class="checkbox-inline" for="checkboxes-2">
<input name="checkboxes" id="checkboxes-2" type="checkbox" value="marine">
Marine Water
</label>
<label class="checkbox-inline" for="checkboxes-3">
<input name="checkboxes" id="checkboxes-3" type="checkbox" value="rain">
Rain
</label>
<label class="checkbox-inline" for="checkboxes-4">
<input name="checkboxes" id="checkboxes-4" type="checkbox" value="none">
None
</label>
</div>
</div>
<!-- Text input-->
<div id="blank_co" div class="form-group">
<label class="col-md-4 control-label" for="blankbg">Blanks cutoff: (1-99)</label>
<div class="col-md-4">
<input name="blankbg" class="form-control input-md" id="blankbg" required="" type="text" placeholder="" value="10">
</div>
</div>
<!-- Text input-->
<div id="fresh_co" div class="form-group">
<label class="col-md-4 control-label" for="freshbg">Fresh water cutoff: (1-99)</label>
<div class="col-md-4">
<input name="freshbg" class="form-control input-md" id="freshbg" required="" type="text" placeholder="" value="10">
</div>
</div>
<!-- Text input-->
<div id="marine_co" div class="form-group">
<label class="col-md-4 control-label" for="marinebg">Marine water cutoff: (1-99)</label>
<div class="col-md-4">
<input name="marinebg" class="form-control input-md" id="marinebg" required="" type="text" placeholder="" value="10">
</div>
</div>
<!-- Text input-->
<div id="rain_co" div class="form-group">
<label class="col-md-4 control-label" for="rainbg">Rain water cutoff: (1-99)</label>
<div class="col-md-4">
<input name="rainbg" class="form-control input-md" id="rainbg" required="" type="text" placeholder="" value="10">
</div>
</div>【问题讨论】：
-
您使用复选框的
.change()方法，该方法在其值更改后触发给定函数。因此，您必须首先单击它们。 -
我会尽快更新我的问题。我将 style="display:none" 添加到 DIV 块中，除非选中复选框，否则它们默认不显示。但这并不能解决“无”框行为。
-
页面加载、显示或隐藏时输入应该如何？
-
当“无”未选中时会发生什么？应该所有显示表单组还是只显示那些在选中时消失的表单组？
标签： javascript jquery html checkbox onchange