Question

我正在准备一个购物车，其价格来自菜单中选择的商品数量。我正在使用javascript在同一页面上计算价格。

＆＃13;

function myFunction() {
  var coffee = document.forms[0];
  var txt = 0;
  var i;


  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt = txt++;
    }
  }
  document.getElementById("order").value = txt;
}

＆＃13;

<label> Select the project category you will like to float </label>
<div class="form-group">
  <input type="checkbox" name="coffee" value="1">Web Development
  <input type="checkbox" name="coffee" value="1">App Development
  <input type="checkbox" name="coffee" value="1">SEO Ninja
  <input type="checkbox" name="coffee" value="1">The Social media geek
  <input type="checkbox" name="coffee" value="1">Design Wizard
  <input type="checkbox" name="coffee" value="1">The contest of Content
  <input type="checkbox" name="coffee" value="1">Marketing Marathon
  <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
</div>

<input type="button" onclick="myFunction()" value="Add to cart">
<input type="text" id="order" size="50">
<div class="row">
  <div class="form-group">
    <ul class="actions">
      <input type="submit" name="submit3" value="Register">
    </ul>
  </div>
</div>
</form>

＆＃13;

有人可以帮我用txt返回一个整数值（=检查项目数）。

Answer 1

当您使用txt = txt++;时，您将使用旧值替换下一个值。您只需使用txt++。此外，我认为如果你给表单提供一个id以确保你正在瞄准正确的表格会更好，因为ids是/必须是唯一的。请参阅下面的工作片段：

function myFunction() {
  var coffee = document.getElementById('cart_form');
  var txt = 0;
  var i;

  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt++;
    }
  }
  document.getElementById("order").value = txt;
}

<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" onclick="myFunction()" value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

正如您所看到的，我还为form元素添加了一个开始标记。

您可以从此处运行工作代码段，或者如果需要，可以查看 JSFIDDLE 进行测试。

没有旧onclick的替代方案对于点击过于使用addEventListener，如下所示：

document.getElementById("add_to_cart").addEventListener("click", function() {
  var coffee = document.getElementById('cart_form');
  var txt = 0;
  var i;

  for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
      txt++;
    }
  }
  document.getElementById("order").value = txt;
});

<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" id='add_to_cart' value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

我看到你也将此标记为jQuery。以下是使用$(":checkbox:checked").length的替代方法：

$('#add_to_cart').on('click', function(){
  $('#order').val($("#cart_form :checkbox:checked").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action='' id='cart_form'>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" id='add_to_cart' value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

Answer 2

您不需要循环来计算选中的复选框数。

您可以查看querySelectorAll并仅获取选中的复选框。现在，您只需检查.length即可获得txt值。

var txt = document.querySelectorAll('#frm1 input[name="coffee"]:checked').length;

注意：我已将id属性添加到form代码，以便唯一获取复选框。

示例代码

＆＃13;

function myFunction() {
  var txt = document.querySelectorAll('#frm1 input[name="coffee"]:checked').length;
  document.getElementById("order").value = txt;
}

＆＃13;

<form id="frm1" method='post' action=''>
  <label> Select the project category you will like to float </label>
  <div class="form-group">
    <input type="checkbox" name="coffee" value="3">Web Development
    <input type="checkbox" name="coffee" value="1">App Development
    <input type="checkbox" name="coffee" value="1">SEO Ninja
    <input type="checkbox" name="coffee" value="1">The Social media geek
    <input type="checkbox" name="coffee" value="1">Design Wizard
    <input type="checkbox" name="coffee" value="1">The contest of Content
    <input type="checkbox" name="coffee" value="1">Marketing Marathon
    <input type="checkbox" name="coffee" value="1">Recruitment Hackathon
  </div>

  <input type="button" onclick="myFunction()" value="Add to cart">
  <input type="text" id="order" size="50">
  <div class="row">
    <div class="form-group">
      <ul class="actions">
        <input type="submit" name="submit3" value="Register">
      </ul>
    </div>
  </div>
</form>

＆＃13;

Answer 3

首先，您需要将txt = txt++替换为txt++或txt = txt + 1

我还建议您使用document.getElementsByName('coffee');

因为这可以保证将来如果为其他目的添加其他输入，您将无需更改此功能。

＆＃13;

function myFunction() {
var coffee = document.getElementsByName('coffee');
var txt = 0;
var i;


for (i = 0; i < coffee.length; i++) { 
    if (coffee[i].checked) {
        txt++;
    }
}
document.getElementById("order").value = txt;
}

＆＃13;

<label> Select the project category you will like to float </label>
<div class="form-group">
<input type="checkbox" name="coffee" value="1">Web Development 
<input type="checkbox" name="coffee" value="1">App Development 
<input type="checkbox" name="coffee" value="1">SEO Ninja  
<input type="checkbox" name="coffee" value="1">The Social media geek
<input type="checkbox" name="coffee" value="1">Design Wizard 
<input type="checkbox" name="coffee" value="1">The contest of Content 
<input type="checkbox" name="coffee" value="1">Marketing Marathon 
<input type="checkbox" name="coffee" value="1">Recruitment Hackathon 
</div>

<input type="button" onclick="myFunction()" value="Add to cart">
<input type="text" id="order" size="50">

＆＃13;

在javascript中添加变量

3 个答案: