javascript - 如何为检查的数字或单位总和(JavaScript)设置限制(错误警报)？

Question

hi.this is my code.我如何限制检查的数字或单位总和？

例如:如果总和≤12 且≥20，则在按下提交按钮时显示错误日志(结果)。

<script type="text/javascript"> 
  function chkcontrol(j) 
  {
    var sum=0;

    for(var i=0; i < document.form1.ckb.length; i++){
      if(document.form1.ckb[i].checked){
        sum = sum + parseInt(document.form1.ckb[i].value);
    }

    document.getElementById("msg").innerHTML="Sum :"+ sum;

    if(sum >20){
      sum = sum - parseInt(document.form1.ckb[j].value);
      document.form1.ckb[j].checked = false ;
      alert("error:Total of yore choose is more than 20 units") 
      //return false;
    }
    document.getElementById("msg").innerHTML="total units :"+ sum;
  }
}
</script>

Answer 1

这应该可以解决您的问题。

var form = document.forms.myform,
    elem = form.elements,
    inputVals = document.getElementsByClassName("inputVals");


form.onsubmit = function(event){
		event.preventDefault();
		var totalSum = 0;
		for(var i = 1; i <= inputVals.length; i++) {
				var input = document.getElementById("value" + i)
        if (input.checked) {
            totalSum += parseInt(input.value);
        }
    }
    
    if (totalSum < 12 || totalSum > 20) {
    		alert("error:Total of your choise is more than 20 or less 12 units") 
    }
   	else {
    		document.getElementById("msg").innerHTML="total units :" + totalSum;
    }

}

.center{text-align:center;margin-top:1em;}

<form name="myform" actopm="/echo/html/" method="post">
    <table>
        <tr>
            <th>1</th>
            <td><input class="inputVals" value=1 type="checkbox" id="value1" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>2</th>
            <td><input class="inputVals" value=2 type="checkbox" id="value2" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>3</th>
            <td><input class="inputVals" value=3 type="checkbox" id="value3" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>4</th>
            <td><input class="inputVals" value=4 type="checkbox" id="value4" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>5</th>
            <td><input class="inputVals" value=5 type="checkbox" id="value5" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>6</th>
            <td><input class="inputVals" value=6 type="checkbox" id="value6" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>7</th>
            <td><input class="inputVals" value=7 type="checkbox" id="value7" placeholder="input value"/></td>
        </tr>
        <tr>
            <th>8</th>
            <td><input class="inputVals" value=8 type="checkbox" id="value8" placeholder="input value"/></td>
        </tr>
        
    </table>
    <div class="center">
    <input type="submit" value="submit"/>
    </div>
</form>
<div id="msg">

</div>