Question

我有一个产品列表，每个产品都有一个复选框值，其中包含产品ID，例如“321”。选中产品复选框（可以选择多于1个）时，我需要收集值。每个产品还有一个输入文本字段，用于定义数量，例如“23”，我还需要收集该数量值。只有选中复选框并且qty文本值大于1才能收集Qty文本输入。计划是收集所有这些对象，将它们放入循环中，最后将它们转换为字符串，然后我可以显示结果。

到目前为止，我已设法收集复选框值并将这些值放入字符串但我不确定如何收集额外的文本数量输入值而不会破坏它。我的理解是document.getElementsByTagName（'input'）能够收集两种输入类型，因为它基本上寻找输入标签，所以我只需要弄清楚如何收集和循环复选框和文本输入。

有人建议我使用2 if语句来完成此操作，但我是新手学习javascript，所以我不完全确定如何去做。我确实尝试在第一个下面直接添加if语句（就像你在php中一样），但这似乎完全打破了它，所以我认为这是错误的。

到目前为止，这是我的工作代码，它收集复选框值并将它们放在一个字符串中。如果选中该复选框并按下按钮，则值将作为字符串返回。请注意当前没有任何内容附加到qty =因为我不知道如何收集和循环文本输入（这是我需要帮助的。）

如何收集额外的数量输入值并将此数字附加到qty =

// function will loop through all input tags and create
// url string from checked checkboxes
function checkbox_test() {
    var counter = 0, // counter for checked checkboxes
        i = 0,       // loop variable
        url = '/urlcheckout/add?product=',    // final url string
        // get a collection of objects with the specified 'input' TAGNAME
        input_obj = document.getElementsByTagName('input');
    // loop through all collected objects
    for (i = 0; i < input_obj.length; i++) {
        // if input object is checkbox and checkbox is checked then ...
        if (input_obj[i].type === 'checkbox' && input_obj[i].checked) {
            // ... increase counter and concatenate checkbox value to the url string
            counter++;
            url = url + input_obj[i].value + '&qty=' + '|';
        }
    }
    // display url string or message if there is no checked checkboxes
    if (counter > 0) {
        // remove first "&" from the generated url string
        url = url.substr(1);
        // display final url string
        alert(url);
    }
    else {
        alert('There is no checked checkbox');
    }
}

<ul>
<li>
    <form>
        <input type="checkbox" id="checked-product" name="checked-product" value="311">Add To Cart
        <div class="quantity">
            <input type="text" name="qty" id="qty" maxlength="12" value="1" class="input-text qty"/>
        </div>
    </form>
</li>
<li>
    <form>
        <input type="checkbox" id="checked-product" name="checked-product" value="321">Add To Cart
        <div class="quantity">
            <input type="text" name="qty" id="qty" maxlength="12" value="10" class="input-text qty"/>
        </div>
    </form>
</li>
<li>
    <form>
        <input type="checkbox" id="checked-product" name="checked-product" value="98">Add To Cart
        <div class="quantity">
            <input type="text" name="qty" id="qty" maxlength="12" value="5" class="input-text qty"/>
        </div>
    </form>
</li>
</ul>

    <button type="button" onclick="javascript:checkbox_test()">Add selected to cart</button>

Answer 1

我的回答分为两部分：第1部分是对你的问题的一个相当直接的答案，第2部分建议更好的方法来做到这一点，这可能更强大和可靠。

第1部分 - 公平直接回答

您可以使用if，而不是第二次text来检查switch输入，而不是：{/ p>

var boxWasChecked = false;

// loop through all collected objects
for (i = 0; i < input_obj.length; i++) {

    // if input object is checkbox and checkbox is checked then ...
    switch(input_obj[i].type) {

      case 'checkbox':
        if (input_obj[i].checked) {
          // ... increase counter and concatenate checkbox value to the url string
          counter++;
          boxWasChecked = true;
          url = url + input_obj[i].value + ',qty=';
        } else {
          boxWasChecked = false;
        }

        break;

      case 'text':
        if (boxWasChecked) {
          url = url + input_obj[i].value + '|';
          boxWasChecked = false;
        }

        break;
    }
}

Here's a fiddle显示它以这种方式工作。

请注意，我添加了变量boxWasChecked，因此您知道是否已选中Qty文本框的相应复选框。

另外，我不确定你想要如何格式化最终查询字符串，所以我把它设置为一个名为product的参数，其值是一个管道和逗号分隔的字符串，你可以解析为提取值。所以网址将如下所示：

urlcheckout/add?product=321,qty=10|98,qty=5

这似乎比拥有一堆具有相同名称的参数更好，尽管你可以调整字符串构建代码，显然。

第2部分 - 建议更好的方式

所有这些都不是一个很好的方法，因为它高度依赖于DOM中的元素位置，因此添加元素或移动元素可能会破坏事物。一种更健壮的方法是在每个复选框与其对应的数量文本框之间建立确定的链接 - 例如，向每个数量文本框添加data-product-id等属性，并将其值设置为相应的复选框value

Here's a fiddle显示出更强大的方式。

您会在那里使用getElementsByTagName()上已包含的name属性使用getElementsByName()而不是input：

checkboxes = document.getElementsByName('checked-product'),
qtyBoxes = document.getElementsByName('qty'),

首先，我收集复选框并使用一个对象来跟踪已检查的对象：

var checkedBoxes = {};

// loop through the checkboxes and find the checked ones
for (i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      counter++;
      checkedBoxes[checkboxes[i].value] = 1; // update later w/ real qty
    }
}

然后我收集了Qty文本框，并使用每个data-product-id属性的值（我必须添加到标记中），确定是否选中了它的复选框：

// now get the entered Qtys for each checked box
for (i = 0; i < qtyBoxes.length; i++) {
  pid = qtyBoxes[i].getAttribute('data-product-id');

  if (checkedBoxes.hasOwnProperty(pid)) {
    checkedBoxes[pid] = qtyBoxes[i].value;
  }
}

最后，我使用checkedBoxes对象构建网址：

// now build our url
Object.keys(checkedBoxes).forEach(function(k) {
  url += [
    k,
    ',qty=',
    checkedBoxes[k],
    '|'
  ].join('');
});

（请注意，这种方式不会保留项目的顺序，因此，如果您的查询字符串需要按照页面上显示的顺序列出项目，则需要使用数组而不是一个对象。）

有很多方法可以实现您的目标。您的原始方式将起作用，但希望这种替代方式可以让您了解如何更清洁可靠地实现它。

Answer 2

检查以下简化版本。

document.querySelector("#submitOrder").addEventListener('click', function(){
	var checkStatus = document.querySelectorAll('#basket li'),
  		urls = [];
  Array.prototype.forEach.call(checkStatus, function(item){
    var details = item.childNodes,
    	  urlTemplate = '/urlcheckout/add?product=',
    	  url = urlTemplate += details[0].value + '&qty=' + details[1].value;
    urls.push(url)
  });
  console.log(urls);
})

ul{ margin:0; padding:0}

<ul id="basket">
  <li class="products"><input type="checkbox" value = "311" name="item"><input type="text"></li>
  <li><input type="checkbox" value = "312" name="item"><input type="text"></li>
  <li><input type="checkbox" value = "313" name="item"><input type="text"></li>
</ul>
<button id="submitOrder">Submit</button>

使用Javascript将复选框和文本输入值发送到URL字符串

2 个答案: