changing span value when checkbox is checked and unchecked

Question

I want to have a span value change when a checkbox is checked, then changed back to the original value when unchecked.

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

The original value is 'Standard'. I want to change this to 'Expedited' when checked or 'Standard' if unchecked. How do I go about doing this?

Possible duplicate of [Javascript checkbox onChange](https://stackoverflow.com/questions/6358673/javascript-checkbox-onchange) — Masoud Keshavarz, Jun 17 '19 at 04:55

score 0 · Accepted Answer · answered Jun 17 '19 at 04:31

Try like this. add a eventListener to that checkbox and check the status and change its value.

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>

score 0 · Answer 2 · answered Jun 17 '19 at 04:34

You can create two text child span with with Standard & Expedited and a class hiddden. Then on change of the checkbox get all the child span text and add or remove the hidden class using 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">

changing span value when checkbox is checked and unchecked

2 Answers2