選中和取消選中復選框時更改跨度值

Question

我想在選中復選框時更改跨度值，然后在未選中時更改回原始值。

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

原始值為“標准”。 我想在選中時將其更改為“加急”或未選中時將其更改為“標准”。 我該怎么做？

Answer 1

像這樣嘗試。 向該復選框添加一個 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>

Answer 2

您可以使用Standard & Expedited和一個 class hiddden創建兩個文本子span 。 然后更改復選框獲取所有子跨度文本並使用toggle添加或刪除hidden類

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