默認情況下添加複選框值

我試圖做一個代碼，將檢查時顯示divs，並將複選框的值一起添加。我已經設法想出了這個，但現在我想使一些複選框被選中並且它們的值默認添加在一起。我可以使複選框被選中，但是，我需要默認添加的值。任何幫助，將不勝感激。這裏是我的代碼：一個這是第一款
這是第二款
這是第三段
默認情況下添加複選框值

<form name="formex"> 

<input onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10"> $10.00<br> 
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="two" value="12"> $12.00<br> 
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="three" value="1"> $1.00<br> 
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="four" value="2"> $2.00<br> 
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="five" value="24"> $24.00<br> 

<br> 
<input id="total" type="text" name="total"> 
</form>

我的腳本

<script language="JavaScript" type="text/javascript"> 
var total = document.getElementById("total") 
function clickCh(caller){ 
if(caller.checked){ 
add(caller) 
} else { 
subtract(caller) 
}} 

function add(caller){ total.value = total.value*1 + caller.value*1} 
function subtract(caller){ total.value = total.value*1 - caller.value*1} 


function showPara() 
     { 
      document.getElementById("first").style.display=(document.formex.one.checked) ? "inline" : "none"; 
      document.getElementById("second").style.display=(document.formex.two.checked) ? "inline" : "none"; 
      document.getElementById("third").style.display=(document.formex.three.checked) ? "inline" : "none"; 
      return true; 
     } 
</script>

的jsfiddle：http://jsfiddle.net/TCZ6t/1/

來源

2013-05-14 Capwiz

我知道這與您的問題無關，但考慮將ID更改爲'item1，item2，... itemn'這樣的東西，所以在您的JS中，您可以使用for循環'getElementById（「item」+ i）' –

當然。我會做的。謝謝。 – Capwiz

如果您按照David的說法更改ID，那麼您可以編寫一個函數來遍歷並累計所有複選框。那麼你不需要add（）和subtract（）函數，並且你可以簡單地在腳本開頭運行一次函數來考慮任何默認值。 – Sam

你應該可以在ta的末尾添加「checked」屬性g默認選中它。換句話說，如果我想$ 10被默認選中我只是改變標籤：

<input checked onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10" checked> $10.00<br>

來源

2015-02-05 03:25:37

你可以只循環中的所有選中的複選框，並調用add方法類似

var els = document.querySelectorAll('form[name="formex"] input[type="checkbox"]'); 
for (var i = 0; i < els.length; i++) { 
    if (els[i].checked) { 
     add(els[i]) 
    } 
}

演示：

var total = document.getElementById("total"); 
 

 
function clickCh(caller) { 
 
    if (caller.checked) { 
 
    add(caller) 
 
    } else { 
 
    subtract(caller) 
 
    } 
 
} 
 

 
function add(caller) { 
 
    total.value = total.value * 1 + caller.value * 1 
 
} 
 

 
function subtract(caller) { 
 
    total.value = total.value * 1 - caller.value * 1 
 
} 
 

 

 
function showPara() { 
 
    document.getElementById("first").style.display = (document.formex.one.checked) ? "inline" : "none"; 
 
    document.getElementById("second").style.display = (document.formex.two.checked) ? "inline" : "none"; 
 
    document.getElementById("third").style.display = (document.formex.three.checked) ? "inline" : "none"; 
 
    return true; 
 
} 
 

 
var els = document.querySelectorAll('form[name="formex"] input[type="checkbox"]'); 
 
for (var i = 0; i < els.length; i++) { 
 
    if (els[i].checked) { 
 
    add(els[i]) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="first" style="display:none;">This is the first paragraph</div> <br /> 
 
<div id="second" >This is the second paragraph</div> <br /> 
 
<div id="third" style="display:none;">This is the third paragraph</div> <br /> 
 

 
<form name="formex"> 
 
    <input onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10"/> $10.00<br/> 
 
    <input onclick="clickCh(this) ; showPara()" type="checkbox" name="two" value="12"/> $12.00<br/> 
 
    <input onclick="clickCh(this) ; showPara()" type="checkbox" name="three" value="1"/> $1.00<br/> 
 
    <input onclick="clickCh(this) ; showPara()" type="checkbox" name="four" value="2" checked /> $2.00<br/> 
 
    <input onclick="clickCh(this) ; showPara()" type="checkbox" name="five" value="24" checked /> $24.00<br/> 
 
    
 
    <br/> 
 
    <input id="total" type="text" name="total"/> 
 
</form>

來源

2015-02-05 03:42:18

默認情況下添加複選框值

回答

相關問題