使用複選框操縱標籤

場景：
三個未選中的複選框，每個複選框都具有不同的標識和值。
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

使用複選框操縱標籤

回答

相關問題