1

我正在尝试编写一个代码，该代码将在选中时显示 div，并将复选框的值添加在一起。我已经设法想出了这个，但现在我想检查一些复选框，并将它们的值默认添加在一起。我可以选中复选框，但是，我还需要默认添加该值。任何帮助，将不胜感激。这是我的代码： a 这是第一段
这是第二段
这是第三段 

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

4

2 回答 2

0

您应该能够将属性“checked”添加到标签的末尾以使其默认检查。换句话说，如果我希望默认检查 $10，我只需将标签更改为：

<input checked onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10" checked> $10.00<br>
于 2015-02-05T03:25:37.603 回答
0

您可以循环所有选中的复选框并调用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-05T03:42:18.873 回答