使用复选框操纵标签

场景：
三个未选中的复选框，每个复选框都具有不同的标识和值。
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>

来源

2014-01-07 Don Exo

发布您的代码PLZ。 – xdazz

完成。我只需要添加或减去“par”中的值，具体取决于是否勾选复选框。 –

这将做到这一点：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>

JavaSc RIPT：

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; 
}

来源

2014-01-07 02:13:51 acarlon

还有一件事。我怎样才能使用它来创建一个'愿望清单'？即我点击cb和标题（在这种情况下，它可以是它的ID）以显示在无序列表中？取消选中将其从列表中删除？ –

@DonExo由于我感到慷慨：http://jsfiddle.net/85PCp/4/ – acarlon

你的慷慨是非常感谢:) –

<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代码

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

来源

2014-01-07 02:09:34 jingyinggong

这不会帮助我。如果我已经检查了所有3 cb，我应该得到结果= 6 （1 + 2 + 3 = 6）... –

<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>

来源

2014-01-07 02:51:00 Nogusta

使用复选框操纵标签

回答

相关问题