Question

我想在span 1000中使用onclick函数添加500 表示在复选框上点击sapn值将为1500

JS

function add() {
    if (document.Form1.checkbox1.checked == true) {
        // what will code here to sum 500  in to 1000   
    }
}

HTML

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

Answer 1

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

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

Answer 2

如果您不想使用jQuery，则可以使用以下内容。

＆＃13;

function add(element) {
  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);
  } else {
    form.getElementsByTagName('span')[0].innerHTML = parseInt(val) - parseInt(element.value);
  }
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用jquery将change事件绑定到复选框，而不是编写内联函数调用。
使用值属性为顺序复选框提供值。
在添加内容之前使用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);
    });

Fiddle

Answer 4

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

然后您可以使用document.getElementById()（如果在javaScript中）或$('#id')（在jQuery中）来访问此元素并更改文本（通过js和.text（）/。html中的innerText / innerHTML （）jQuery）

Answer 5

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

试试这段代码 -

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

用于现代浏览器 -

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

Answer 6

请尝试下面的代码，

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#checkbox1').click(function(){
		var checkboxval = parseInt($(this).val());
		var spanval     = parseInt($('#total').text());
		if(this.checked){
			$('#total').text(checkboxval + spanval);
		}
		
	});
});
</script>
<body>
<form name="Form1" style="color: green ; font-size: 150%" action = "#">

<input type="checkbox" name="checkbox1"  id="checkbox1" value="500"/>500

<br/>

<span id="total">1000</span>

</form>

</body>

＆＃13;

如果您有任何疑问，请告诉我

由于

使用JavaScript在span中添加值

6 个答案: