Путаница со скрытием некоторых полей ввода с помощью JS vanilla

ProgramBox

Путаница со скрытием некоторых полей ввода с помощью JS vanilla

Post author:admin
Запись опубликована:15 января, 2022
Post category:Вопросы по программированию

#javascript #html #input #checkbox #field

Вопрос:

Я хочу показывать скрытые поля ввода при установке флажка «Купить в компании». Это работает, но если я сниму флажок, оставив флажок «Освобожден от НДС», и верну: «Поле идентификатора НДС» отображается с флажком «Освобожден от НДС». Поэтому я хочу избежать этой ситуации.

Картина ситуации:

 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>

1. Код для нажатия на Buy on company него должен проверить флажок НДС, чтобы решить, показывать ли ввод НДС.

2. document.getElementById-довольно тяжелая операция, вам нужно сделать это только один раз, после чего вы сможете повторно использовать кэшированные переменные, также изучение того, как выбирать и пересекать dom, может сократить ваш код примерно до 7 строк

Ответ №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>

1. Спасибо. Но поле идентификатора НДС остается, если снять флажок «Купить на conpany».

2. Исправлено. Я переместил этот тест внутри if блока, в котором отображаются все остальные поля.

3. Хмм. Это только для меня? Поле Идентификатор НДС остается прежним, затем снимите все флажки.

4. Это просто скрывает и показывает, это ничего не меняет в содержимом.

5. Да, но я все равно понимаю i.imgur.com/46Y0cmt.png

Ответ №2:

Одной строки не хватало, чтобы скрыть «billing_vat_id» во втором заявлении «еще».

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

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