Изменить цвет текста в другом div при нажатии в предыдущем div input type="checkbox"

Question

Необходимо изменить цвет текста в другом div (control-label) при нажатии в предыдущем div (controls) на input type="checkbox".

<div class="control-group">
<div class="controls">
<input type="checkbox" name="gdpr_privacy_policy_checkbox" id="gdpr_privacy_policy_checkbox" value="1" aria-required="true" class="required"></div>
<div class="control-label">
<a data-role="gdpr_privacy_policy" href="javascript:void(0)" target="_blank">
<label title="Вот">Вот для этого текста нужно поменять цвет при нажатии на input checkbox</label>
</a>
</div>
</div>

Answer 1

<div class="control-group">
  <div class="controls">
    <input type="checkbox" name="gdpr_privacy_policy_checkbox" id="gdpr_privacy_policy_checkbox" value="1" aria-required="true" class="required" onclick="document.querySelector('div.control-label label').style.color = (this.checked) ? 'red' : '';">
  </div>
  <div class="control-label">
    <a data-role="gdpr_privacy_policy" href="javascript:void(0)" target="_blank">
      <label title="Вот">Вот для этого текста нужно поменять цвет при нажатии на input checkbox</label>
    </a>
  </div>
</div>

Или так:

document.getElementById('gdpr_privacy_policy_checkbox').addEventListener('click', function(ev) {
  document.querySelector('div.control-label label').style.color = (this.checked) ? 'red' : ''
});

<div class="control-group">
  <div class="controls">
    <input type="checkbox" name="gdpr_privacy_policy_checkbox" id="gdpr_privacy_policy_checkbox" value="1" aria-required="true" class="required">
  </div>
  <div class="control-label">
    <a data-role="gdpr_privacy_policy" href="javascript:void(0)" target="_blank">
      <label title="Вот">Вот для этого текста нужно поменять цвет при нажатии на input checkbox</label>
    </a>
  </div>
</div>

Для динамически добавляемых блоков:

document.addEventListener('click', function(ev) {
  if (ev.target.tagName != 'INPUT') { return false; }
  ev.target.closest('.control-group').querySelector('div.control-label label').style.color = (ev.target.checked) ? 'red' : '';
});

<div class="control-group">
  <div class="controls">
    <input type="checkbox" name="gdpr_privacy_policy_checkbox" id="gdpr_privacy_policy_checkbox" value="1" aria-required="true" class="required">
  </div>
  <div class="control-label">
    <a data-role="gdpr_privacy_policy" href="javascript:void(0)" target="_blank">
      <label title="Вот">Вот для этого текста нужно поменять цвет при нажатии на input checkbox</label>
    </a>
  </div>
</div>
<div class="control-group">
  <div class="controls">
    <input type="checkbox" name="gdpr_privacy_policy_checkbox" id="gdpr_privacy_policy_checkbox" value="1" aria-required="true" class="required">
  </div>
  <div class="control-label">
    <a data-role="gdpr_privacy_policy" href="javascript:void(0)" target="_blank">
      <label title="Вот">Вот для этого текста нужно поменять цвет при нажатии на input checkbox</label>
    </a>
  </div>
</div>

Если стилизация не ограничивается одним свойством, то добавляем/удаляем CSS-класс:

document.addEventListener('click', function(ev) {
  if (ev.target.name == 'gdpr_privacy_policy_checkbox') {
  ev.target.closest('.control-group').querySelector('div.control-label label').classList.toggle('check', ev.target.checked); }
});

.check {
  color: red;
  font-weight: 700;
}

<div class="control-group">
  <div class="controls">
    <input type="checkbox" name="gdpr_privacy_policy_checkbox" id="gdpr_privacy_policy_checkbox" value="1" aria-required="true" class="required">
  </div>
  <div class="control-label">
    <a data-role="gdpr_privacy_policy" href="javascript:void(0)" target="_blank">
      <label title="Вот">Вот для этого текста нужно поменять цвет при нажатии на input checkbox</label>
    </a>
  </div>
</div>

БЛОГ НА HUSL

Изменить цвет текста в другом div при нажатии в предыдущем div input type="checkbox"

Ответы (1 шт):