Checkbox toggle field with jQuery

Question

Try show/hide a field when checked a checkbox. How can i do this with jQuery?

Thats my code:

<input type="checkbox" class="input-checkbox " name="billing_wcj_checkout_field_2" id="billing_wcj_checkout_field_2" value="1">

<input type="text" class="input-text " name="billing_eu_vat_number" id="billing_eu_vat_number" placeholder="EU VAT Number" value="">

<script>
    jQuery(function() {
            jQuery('input[type="checkbox"]').on('change', function() {
                jQuery(this).find('#billing_eu_vat_number_field').toggle(!this.checked);
            });
        });
    });
</script>

For one thing, the id you are searching for in the jqeury is incorrect, you have add _field to it. — c3st7n
– c3st7n, Commented Mar 21, 2018 at 11:55

aMJay · Accepted Answer · 2018-03-21 11:55:20Z

1

You can do it like that:

    jQuery(function() {
            jQuery('.input-checkbox').change(function() {
                jQuery('#billing_eu_vat_number').toggle();
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="input-checkbox " name="billing_wcj_checkout_field_2" id="billing_wcj_checkout_field_2" value="1">

<input type="text" class="input-text " name="billing_eu_vat_number" id="billing_eu_vat_number" placeholder="EU VAT Number" value="">

answered Mar 21, 2018 at 11:55

aMJay

2,2436 gold badges24 silver badges37 bronze badges

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

1 Comment

Tuxy Over a year ago

Thanks for your help. At this moment i used the code from Smit Raval , but i'm happy also with your answer. So i can learn a lot how coding 'best practice' in jQuery :-)

Smit Raval · Accepted Answer · 2018-03-21 11:57:54Z

0

HTML

<input type="checkbox" class="input-checkbox " name="billing_wcj_checkout_field_2" id="billing_wcj_checkout_field_2" value="1">

<input type="text" class="input-text " name="billing_eu_vat_number" id="billing_eu_vat_number" placeholder="EU VAT Number" style="display:none;" value="">

JS

$(document).ready(function(){
  $("#billing_wcj_checkout_field_2").click(function(){
    if($(this).is(":checked")){
      $("#billing_eu_vat_number").show();
    }else{
      $("#billing_eu_vat_number").hide();
    }
  });

});

Working pen link

enter link description here

answered Mar 21, 2018 at 11:57

Smit Raval

3,5161 gold badge12 silver badges24 bronze badges

3 Comments

Smit Raval Over a year ago

Please approve the answer if it helped. :) Thanks @Tuxy

Tuxy Over a year ago

Ok, i'm sorry! forget :-/

Smit Raval Over a year ago

No issue. Thanks @Tuxy :)

Collectives™ on Stack Overflow

Checkbox toggle field with jQuery

2 Answers 2

1 Comment

HTML

JS

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

HTML

JS

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related