javascript显示/隐藏无法与html字段一起正常工作

Question

以下是我用来让用户手动选择工作/启动时间的选项。

<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div> 

<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1,#id_2').show();
} else {
$('#id_1,#id_2').hide();
}
});
</script>

默认情况下，该字段应被隐藏，但事实并非如此。相反，即使在没有选中复选框的情况下，该字段也是可见的，为了使其隐藏，我不得不选中该复选框并再次取消选中它。然后输入字段被隐藏。我该怎么解决这个问题？

这是jsfiddle链接，它显示了同样的问题。https://jsfiddle.net/shijilt/bs02m98w/

Answer 1

代码只是在单击#beastmode元素后更改可见性。否则没有明确的默认值。

您可以在页面加载时隐藏它：

$(function () {
$('#id_1,#id_2').hide();
});

或者，更好的是，将其设置为默认隐藏在CSS:中

#id_1,#id_2 {
display: none;
}

这样，无论是否有任何JavaScript代码成功执行，它在默认情况下都会从样式本身隐藏起来。

示例

Answer 2

几乎您的代码都很好。试试这个，它肯定会起作用。

<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>
<div class="input-group date" id="id_1" style="display:none;">
<input type="text" name="day11" value="09:00 AM" class="form-control"
placeholder="End time" title="" required/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="glyphicon glyphicon-time fa fa-clock-o"></i>
</div>
</div>
</div> 


<script>
$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
$('#id_1').show();
} else {
$('#id_1').hide();
}
});
</script>

1. 首先你必须隐藏div，其中id＝#id_1有很多方法可以隐藏，但我使用简单的方法通过显示来隐藏它：none；在风格上
2. 第二，当你点击复选框时，如果它为true，它会显示div，其中id=#id_1，否则它会隐藏div。如果你传递了两个id，这是错误的，因为它在页面中没有找到#id_2，这就是不显示/隐藏内容的原因