使用jQuery复选框切换字段

Question

选中复选框后，尝试显示/隐藏字段。 我怎么能用jQuery做到这一点？

这是我的代码：

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

Answer 1

你可以这样做：

    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="">

Answer 2

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

});

工作笔链接

enter link description here