如何在JS/jQuery中使用checkbox实现$0与$100两个数值的切换

需求说明 #

• checkbox未勾选时始终显示$0，勾选时始终显示$100
• 不使用display:none切换div的方案，要求使用str.replace方法实现
• 现有代码仅支持从$0替换为$100的单向切换，需要调整为双向切换

现有代码 #

JS代码 #

function myFunction() {
  let str = document.getElementById("demo").innerHTML; 
  
  document.getElementById("demo").innerHTML = str.replace("$0", "$100");
}

HTML代码 #

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String</h2>

<p>replace() 方法用于在字符串中查找指定值或正则表达式匹配项，并返回替换指定值后的新字符串。</p>

<p id="demo">$0</p>

<input type="checkbox" onclick="myFunction()" value="Try It">

</body>
</html>

解决方案 #

只需要在函数中获取checkbox的勾选状态，根据状态决定替换方向即可，修改后代码如下：

修改后的JS代码 #

function myFunction(checkbox) {
  const demoElement = document.getElementById("demo");
  const originText = demoElement.innerHTML;
  // 勾选时把$0替换为$100，未勾选时把$100替换为$0
  if (checkbox.checked) {
    demoElement.innerHTML = originText.replace("$0", "$100");
  } else {
    demoElement.innerHTML = originText.replace("$100", "$0");
  }
}

修改后的HTML checkbox部分 #

<input type="checkbox" onclick="myFunction(this)" value="Try It">

该方案严格遵循要求的replace方法实现逻辑，双向切换稳定无问题。

内容的提问来源于stack exchange，提问作者user10598595