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

您可以使用span和Standard创建两个文本子项Expedited，并创建一个类hiddden。然后，在更改复选框的情况下，获取所有子跨度文本，并使用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">

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

2 个答案: