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

【问题标题】：Confusion with hiding some input fields using JS vanilla混淆使用 JS vanilla 隐藏一些输入字段
【发布时间】：2021-07-14 19:49:56
【问题描述】：

我想在选中“在公司购买”复选框时显示隐藏的输入字段。它可以工作，但如果我取消选中它并选中“是否免除增值税”并返回：“增值税 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>

【问题讨论】：

点击Buy on company的代码需要测试VAT复选框来决定是否显示VAT输入。
document.getElementById 是一个相当繁重的操作，你只需要做一次就可以重复使用缓存的变量，同时学习如何选择和遍历 dom 可以将你的代码减少到 7 行

标签： javascript html input checkbox field

【解决方案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>

【讨论】：

谢谢。但是，当取消选中“在公司购买”时，会留下增值税 id 字段
已修复。我将该测试移到了显示所有其他字段的 if 块中。
嗯。只是为了我吗？增值税 ID 字段保持不变，然后取消选中所有内容。
这只是隐藏和显示，它不会改变任何内容。
是的，但我仍然收到i.imgur.com/46Y0cmt.png

【解决方案2】：

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

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

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

【讨论】：

不要只是发布代码，解释问题是什么以及您是如何解决的。
谢谢你，巴尔玛。