如何使用jQuery处理初始状态和复选框的更改?

Question

我需要通过jquery根据复选框值显示/隐藏div：

1. 当网页加载和
2. 复选框值更改时(单击/更改时(

我发现很少有方法可以单独解决这些问题，但是是否存在一种简单的方法可以同时处理两组事件？

示例(更改(：

$(document).ready(function(){
$('#checkbox1').change(function(){
if(this.checked)
$('#autoUpdate').show();
else
$('#autoUpdate').hide();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" type="checkbox" id="checkbox1" checked>
<div id="autoUpdate" class="autoUpdate">
Example
</div>

Answer 1

您可以在加载页面时触发事件：

$('#checkbox1').change();

$(document).ready(function(){
$('#checkbox1').change(function(){
console.log('fired');
if(this.checked)
$('#autoUpdate').show();
else
$('#autoUpdate').hide();
});
$('#checkbox1').change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" type="checkbox" id="checkbox1" checked>
<div id="autoUpdate" class="autoUpdate">
Example
</div>

Answer 2

只是为了提供另一种选择，如果您的元素是同级，您可以使用 CSS 执行相同的逻辑，如果未选中以前的同级，则向同级应用显示 none。

#checkbox1:not(:checked) ~ #autoUpdate {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" type="checkbox" id="checkbox1" checked>
<div id="autoUpdate" class="autoUpdate">
Example
</div>

Answer 3

[我看错了这个问题，我的错。

使用 .on(( 将函数绑定到多个事件。

$('#element').on('click change', function(e) { // e.type is the type of event fired });

查看此答案以获取更多详细信息。