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

您应该只需添加属性＆＃34;已选中＆＃34;到标签的末尾默认选中它。换句话说，如果我想在默认情况下检查10美元，我只需将标签更改为：

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

Answer 2

您可以循环选中所有选中的复选框并调用{/ 1}}方法，如

add

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

默认情况下添加了复选框值

2 个答案: