기본적으로 확인란의 값이 추가되었습니다.

Question

확인란을 선택하면 div가 표시되고 체크 상자의 값도 함께 추가되는 코드를 만들려고합니다. 나는이 문제를 해결할 수 있었지만 이제는 체크 박스의 일부를 확인하고 기본값을 함께 추가하려고합니다. 나는 체크 박스를 체크 할 수 있지만, 기본적으로 추가 될 값이 필요하다. 어떤 도움을 주시면 감사하겠습니다. 이것은 첫 번째 단락
있는 이이 세 번째 단락

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

Answer 1

당신은 ta의 끝에 "checked"속성을 추가 할 수 있어야합니다. g 기본적으로 선택되어 있습니다.

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]) 
    } 
} 

데모 같은 add 방법을

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

Answer 2

당신 수 단지 루프의 모든 체크 체크 박스와 전화 : 나는 기본적으로 선택되는 $ 10를 원한다면 즉, 난 그냥에 태그를 바꿀 것 :

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>