使用JavaScript在span中添加值

我想在span 1000中使用onclick函数添加500 意味着选中复选框时，sapn值将为1500

JS

HTML

<form name="Form1" style="color: green ; font-size: 150%" action="#">
    <input type="checkbox" name="checkbox1" onclick="add()" />500
    <br />
    <span>1000</span>
</form>

500


1000

确保在span元素中添加一个id，以便在javascript中轻松定位它。然后以元素为目标并更改innerHTML

var spanToChance = document.getElementById("#spanID");
spanToChange.innerHTML = parseInt(spanToChange.innerHTML) + 500; 

• 您可以使用jquery将更改事件绑定到复选框，而不是编写内联函数调用
• 使用复选框的值属性以提供值
• 在添加内容之前使用parseInt。否则它将把它当作字符串

示例代码

   $("[name='checkbox1']").change(function () {
        var spanvalue = parseInt($("span").text().trim());
        if (this.checked) {
            spanvalue = spanvalue + parseInt(this.value);
        } else {
            spanvalue = spanvalue - parseInt(this.value);
        }
        $("span").text(spanvalue);
    });

---

正如Kushal在他们的四条评论中提到的那样，您需要在跨度中添加一个识别特征，以便知道将新值放在何处

---

然后，您可以使用

document.getElementById（）

（如果在javaScript中）或

$（'#id'）

（在jQuery中）访问此元素并更改文本（通过js中的innerText/innerHTML和jQuery中的.text（）/.html（））

如果您不想使用jQuery，则可以使用以下命令

函数添加（元素）{
var form=document.getElementsByName（“Form1”）[0]；
var val=form.getElementsByTagName（'span'）[0].innerHTML；
if（element.checked==true）{
form.getElementsByTagName（'span'）[0]。innerHTML=parseInt（val）+parseInt（element.value）；
}否则{
form.getElementsByTagName（'span'）[0]。innerHTML=parseInt（val）-parseInt（element.value）；
}
}

500


1000

适用于现代浏览器-

document.getElementById("myspan").textContent="1500";

---

请尝试下面的代码

$（文档）.ready（函数（）{
$（'#复选框1'）。单击（函数（）{
var checkboxval=parseInt（$（this.val（））；
var spanval=parseInt（$（'#total'）.text（）；
如果（选中此项）{
$（“#总计”）.text（checkboxval+spanval）；
}
});
});
500


1000

首先为该spanvar spnVal=$（“#spnId”）.text（）或$（#spnId”）.val（）指定id或类；var newVal=parseInt（spnVal）+500$（#spnId）文本（newVal）；或美元（“#spnId”）.val（新瓦尔）@KushalVora可能，OP希望将文本框中的值添加到span中，但取消选中后，该值将为1000，请帮助

<span id="myspan"> 1000 </span>

document.getElementById("myspan").innerHTML="1500";

document.getElementById("myspan").textContent="1500";