изменение значения диапазона, когда флажок установлен и снят

Question

Я хочу изменить значение диапазона, когда установлен флажок, а затем вернуться к исходному значению, если не отмечено.

<span id="shipping">Standard</span>
<input class="form-check-input" type="checkbox" name="ship" value="Expedited" id="exp1">

Исходное значение «Стандарт». Я хочу изменить это на «Ускоренный», когда отмечен, или «Стандартный», если не отмечен. Как мне это сделать?

Answer 1

Вы можете создать два текстовых дочерних span с помощью Standard & Expedited и класса hiddden. Затем при изменении флажка получите весь дочерний текст span и добавьте или удалите класс hidden, используя toggle

document.getElementById('exp1').addEventListener('change', function(e) {
  changeDisplay()
})

function changeDisplay() {
  document.querySelectorAll('.spanTxt').forEach(function(elem) {
    elem.classList.toggle('hidden')
 })
}

.hidden {
  display: none;
}

<span>
 <span class="spanTxt">Standard</span>
<span class="spanTxt hidden">Expedited</span>
</span>

<input class="form-check-input" type="checkbox" name="ship" value="Expedited" id="exp1">

Answer 2

Попробуй вот так.добавьте eventListener к этому флажку и проверьте статус и измените его значение.

document.getElementById('exp1').addEventListener('click', function(){
  if(this.checked){
    this.value = 'Expedited';;
    document.getElementById('name').innerHTML = 'Expedited';
  }
  else{
   this.value = 'Standard'; 
   document.getElementById('name').innerHTML = 'Standard';
  }
});

<input class="form-check-input" type="checkbox" name="ship" value="Standard" id="exp1"><span id="name">Standard<span>