混淆使用 JS vanilla 隐藏一些输入字段

Question

我想在选中“在公司购买”复选框时显示隐藏的输入字段。它有效，但如果我取消选中它，则选中“是否增值税”并选中 return：“增值税 ID 字段”显示为选中“是否增值税”复选框。所以我想避免这种情况。

情况图片：

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>

Answer 1

点击 buy_on_company 的代码总是隐藏或显示 billing_vat_id 字段。它需要测试该复选框。

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>

Answer 2

缺少一行，以隐藏第二个 'else' 语句中的“billing_vat_id”。

document.getElementById('billing_vat_id').style['display'] = 'none';

https://i.imgur.com/QRpD12r.png

混淆使用 JS vanilla 隐藏一些输入字段

Confusion with hiding some input fields using JS vanilla

html

javascript

checkbox

field

input