Question

方案：
三个未经检查的复选框，每个复选框具有不同的ID和值 id = par。

的空段落（或标签）

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

现在，当我点击cb1 - ＆gt; '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;
}

Answer 2

<label>
    <input type="checkbox" id="check1" value="check1" onchange="alterP(this);"/>check1
</label>
<label>
    <input type="checkbox" id="check2" value="check2" onchange="alterP(this);"/>check2
</label>
<label>
     <input type="checkbox" id="check3" value="check3" onchange="alterP(this);"/>check3
</label>
<p id="par"></p>

js Code

function alterP(obj) {
    var par = document.getElementById('par');
    var txt = (obj.checked) ? obj.value : "";
    par.innerHTML = txt;
}

Answer 3

<script>
    document.getElementById("1").addEventListener("click", processCheck);
    document.getElementById("2").addEventListener("click", processCheck);
    document.getElementById("3").addEventListener("click", processCheck);

    function processCheck() {

        var theParagraph = document.getElementById("par");

        var currentValue = 0;

        if (!isNaN(parseInt(theParagraph.textContent))) {
            currentValue = parseInt(theParagraph.textContent)
        }

        if (this.checked) {
            theParagraph.textContent = currentValue + parseInt(this.value);
        }
        else {
            theParagraph.textContent = currentValue - parseInt(this.value);
        }
    }
</script>

操纵带有复选框的标签

3 个答案: