How to handle initial state and change of checkbox using jQuery?

Question

I need to show/hide div based on checkbox value by jquery:

when webpage is loaded and
when checkbox value is changed (on click/on change)

I found few ways how to solve these problems separately, but does exists a simple way how to handle both group of events at once?

Example (change):

$(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>

Yes, sure, it is variable. Otherwise the question wouldn't make sense. — Samto
– Samto, Commented Oct 7, 2019 at 20:46

tom · Accepted Answer · 2019-10-07 20:39:05Z

1

You can fire the event when the page is loaded:

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

answered Oct 7, 2019 at 20:39

tom

11k6 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taplar · Accepted Answer · 2019-10-07 21:13:39Z

1

Just to offer an alternative, if your elements are siblings, you could do the same logic with CSS, applying a display none to the sibling if a previous sibling is not checked.

#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>

answered Oct 7, 2019 at 21:13

Taplar

25k4 gold badges24 silver badges36 bronze badges

2 Comments

Samto Over a year ago

Oh sure, interesting alternative, I wouldn't think of doing it this way

Taplar Over a year ago

@TomasKujal keep in mind it can be considered brittle, given that they need to be siblings. However, depending upon your UI, this might be all you need.

mrSerious · Accepted Answer · 2019-10-08 06:56:11Z

-1

[I misread the question, my bad.]

Use .on() to bind your function to multiple events.

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

Look at this answer for more details.

edited Oct 8, 2019 at 6:56

answered Oct 7, 2019 at 20:46

mrSerious

841 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to handle initial state and change of checkbox using jQuery?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related