I want to show hidden input fields when check “Buy on company” checkbox. It works, but if I uncheck it leaving “Is VAT exemt” checked and return: “VAT ID field” is shown with “Is VAT exemt” checkbox checked. So I want to avoid this situation.
Picture of situation:
document.getElementById('billing_company').style['display'] = 'none'; document.getElementById('billing_company_code').style['display'] = 'none'; document.getElementById('is_vat_exempt').style['display'] = 'none'; document.getElementById('is_vat_exempt_field').style['display'] = 'none'; document.getElementById('billing_vat_id').style['display'] = 'none'; document.getElementById('buy_on_company').onclick = function() { if (this.checked) { document.getElementById('billing_company').style['display'] = 'block'; document.getElementById('billing_company_code').style['display'] = 'block'; document.getElementById('is_vat_exempt').style['display'] = 'block'; document.getElementById('is_vat_exempt_field').style['display'] = 'block'; document.getElementById('billing_vat_id').style['display'] = 'block'; } else { document.getElementById('billing_company').style['display'] = 'none'; document.getElementById('billing_company_code').style['display'] = 'none'; document.getElementById('is_vat_exempt').style['display'] = 'none'; document.getElementById('is_vat_exempt_field').style['display'] = 'none'; document.getElementById('billing_vat_id').style['display'] = 'none'; } }; document.getElementById('is_vat_exempt').onclick = function() { if (this.checked) { document.getElementById('billing_vat_id').style['display'] = 'none'; } else { document.getElementById('billing_vat_id').style['display'] = 'block'; } };
<div id="buy_on_company_field"> <input type="checkbox" id="buy_on_company"><label>Buy on company</label> </div> <div id="billing_company_field"> <input type="text" id="billing_company" placeholder="Company name" style="display: block;"> </div> <div id="billing_company_code_field"> <input type="text" id="billing_company_code" placeholder="Company code" style="display: block;"> </div> <div id="is_vat_exempt_field"> <input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label> </div> <div id="billing_vat_id_field"> <input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;"> </div>
Advertisement
Answer
The code for clicking on buy_on_company
is always hiding or showing the billing_vat_id
field. It needs to test that checkbox.
document.getElementById('billing_company').style['display'] = 'none'; document.getElementById('billing_company_code').style['display'] = 'none'; document.getElementById('is_vat_exempt').style['display'] = 'none'; document.getElementById('is_vat_exempt_field').style['display'] = 'none'; document.getElementById('billing_vat_id').style['display'] = 'none'; document.getElementById('buy_on_company').onclick = function() { if (this.checked) { document.getElementById('billing_company').style['display'] = 'block'; document.getElementById('billing_company_code').style['display'] = 'block'; document.getElementById('is_vat_exempt').style['display'] = 'block'; document.getElementById('is_vat_exempt_field').style['display'] = 'block'; if (document.getElementById('is_vat_exempt').checked) { document.getElementById('billing_vat_id').style['display'] = 'none'; } else { document.getElementById('billing_vat_id').style['display'] = 'block'; } } else { document.getElementById('billing_company').style['display'] = 'none'; document.getElementById('billing_company_code').style['display'] = 'none'; document.getElementById('is_vat_exempt').style['display'] = 'none'; document.getElementById('is_vat_exempt_field').style['display'] = 'none'; document.getElementById('billing_vat_id').style['display'] = 'none'; } }; document.getElementById('is_vat_exempt').onclick = function() { if (this.checked) { document.getElementById('billing_vat_id').style['display'] = 'none'; } else { document.getElementById('billing_vat_id').style['display'] = 'block'; } };
<div id="buy_on_company_field"> <input type="checkbox" id="buy_on_company"><label>Buy on company</label> </div> <div id="billing_company_field"> <input type="text" id="billing_company" placeholder="Company name" style="display: block;"> </div> <div id="billing_company_code_field"> <input type="text" id="billing_company_code" placeholder="Company code" style="display: block;"> </div> <div id="is_vat_exempt_field"> <input type="checkbox" id="is_vat_exempt"><label>Is VAT exempt</label> </div> <div id="billing_vat_id_field"> <input type="text" id="billing_vat_id" placeholder="VAT ID field" style="display: block;"> </div>