javascript - 使用复选框操作标签

场景：
三个未选中的复选框，每个复选框具有不同的ID和值。
id = par的空段落（或标签）。

[CB1] has value 1.
[CB2] has value 2.
[CB3] has value 3.

现在，当我单击cb1->'par'时，获取并打印cb1的值。
单击cb3，“ par”获得cb1 + cb3的值。
单击cb1，“ par”减去cb1的值，依此类推。.我想您明白了。

如何仅使用HTML和JavaScript（不使用jQuery）来实现此目的。

<input type="checkbox" id="1" value="1" />
<input type="checkbox" id="2" value="2" />
<input type="checkbox" id="3" value="3" />

<p id="par"></p>

最佳答案

这样做：jsfiddle example（已更新以删除警报）

HTML：

<input type="checkbox" id="1" value="1" onclick='checkClicked(event)'/>
<input type="checkbox" id="2" value="2" onclick='checkClicked(event)'/>
<input type="checkbox" id="3" value="3" onclick='checkClicked(event)'/>
<p id="par"></p>

JavaScript：

function checkClicked(element)
{
    var targetElement = element.target;
    var newVal = targetElement.value;
    if( !targetElement.checked )
    {
        newVal *= -1;
    }
    var currentVal = document.getElementById('par').innerHTML;
    if( currentVal )
    {
        newVal = parseInt(currentVal) + parseInt(newVal);
    }
    document.getElementById('par').innerHTML = newVal;
}

关于javascript - 使用复选框操作标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20962602/