选中和取消选中复选框时更改跨度值

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?

Answer 1

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>

Answer 2

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">