Question

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

网页加载时和
更改复选框的值（单击/更改时）

我发现了几种方法来分别解决这些问题，但是有一种简单的方法可以同时处理两组事件吗？

示例（更改）：

$(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进行相同的逻辑，如果未选中以前的同级元素，则不对同级元素显示任何内容。

#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 });

查看this answer以获得更多详细信息。

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

3 个答案: