Question

我希望得到这个结果 http://farm8.staticflickr.com/7291/11250276724_fc1f751dc0_o.png

这是我想成为结果的图片

但我不知道脚本可以有人帮助我

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction()
    </script>
  </head>

  <body>
    <form>
      <input type="checkbox" id="bike">100<br>
      <input type="checkbox" id="bike2">100<br>
      <input type="checkbox" id="bike3">100<br>
      <button type="button" onclick="myFunction()">Equal</button>
      <input type="text" id="total">
    </form>
  </body>
</html>

我只想要一个输出示例当我选中一个复选框并单击相等时总数将为100但是当我选中两个复选框并且我点击相等时总数将为200.总数将以文本显示。

Answer 1

假设您希望将“总”输入设置为复选框的总和，则应该这样做。

function myFunction() {
    var total = 0;
    if (document.getElementById('bike').checked)
        total += 100;
    if (document.getElementById('bike1').checked)
        total += 100;
    if (document.getElementById('bike2').checked)
        total += 100;
    document.getElementById('total').value = total;
}

Answer 2

我认为您可以更改复选框的dinamically值。如果是这样，您需要控制值。尝试做我的以下示例。这是小提琴：http://jsfiddle.net/m43WZ/

将Jquery添加到头部。如果您已经不这样做了。
添加功能。每个函数都控制您定义的所有对象。我们定义了调用具有复选框类型的所有输入。并且“是”功能控制案例。

编辑： *添加了一个类，只查找我想要求的价格。因此，如果有不同的复选框不计算，则会出现问题并影响我的总金额。在示例中，我将类添加为cbBikePrice以使其清楚。

<pre>
  <script type="text/javascript">
  function myFunction() {
    var total = 0;
    $( "input[type='checkbox'].cbBikePrice" ).each(function( index ) {
    if ($(this).is(':checked'))
    {
        // This is checked checkbox !
        // Add the amount to total
        // Value is a string. So, you need to convert it integer (Numeric)
        total += parseInt($(this).attr("value"));
    }


});
    // Show the final total value
    $("#total").val(total);
}

</script>

3. Html表格。

     <form>
          <input name="100" type="checkbox" class="cbBikePrice" id="bike" value="100"><label for="bike">100</label><br>
      <input type="checkbox" id="bike2" class="cbBikePrice" value="100"><label for="bike2">100</label><br>
      <input type="checkbox" id="bike3" class="cbBikePrice" value="100"><label for="bike3">100</label><br>


<!-- These are not not price -->
      <input type="checkbox" id="bike3" class="" value="100"><label for="bike3">100</label><br>

      <input type="checkbox" id="bike3" class="" value="100"><label for="bike3">100</label><br>
<!-- These are not not price end -->
      <button type="button" onclick="myFunction()">Equal</button>
    <input onclick="myFunction()" type="text" id="total" value="0">
    </form>

Answer 3

试试这个| Demo

<form>
      <input type="checkbox" value="100" id="bike">100<br>
      <input type="checkbox" value="100" id="bike1">100<br>
      <input type="checkbox" value="100" id="bike2">100<br>
      <input type="button" onclick="calculate()" value="equal" />
      <input type="text" id="total">
</form>

function calculate() {
    var total = 0;
    if (document.getElementById('bike').checked)
        total += 100;
    if (document.getElementById('bike1').checked)
        total += 100;
    if (document.getElementById('bike2').checked)
        total += 100;
    document.getElementById('total').value=total;
}

不知道我会放什么剧本

3 个答案: