Как обрабатывать начальное состояние и изменение флажка с помощью jQuery?

Question

Мне нужно показать / скрыть div на основе значения флажка с помощью jquery:

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

Просто чтобы предложить альтернативу, если ваши элементы - братья и сестры, вы можете сделать ту же логику с 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 2

Вы можете запустить событие при загрузке страницы:

$('#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 3

[Я неправильно прочитал вопрос, мой плохой.]

Используйте .on (), чтобы привязать вашу функцию к нескольким событиям.

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

Посмотрите этот ответ для более подробной информации.