javascript - 使用复选框操作标签

Question

场景:
三个未选中的复选框，每个复选框都有不同的 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>

Answer 1

这样就可以了: 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;
}