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

Question

我有一个产品列表，每个单独的产品都有一个带有产品 ID 的复选框值，例如“321”。检查产品复选框（可以超过1个选定），我需要收集的值。每个产品还将有一个用于定义数量的输入文本字段，例如“23”，我还需要收集此数量值。只有选中复选框，QTY文本值大于1.计划是收集所有这些对象，将它们放入循环，最后将它们转换为我可以的字符串显示结果。

到目前为止，我已经设法收集复选框值并将它们放入一个字符串中，但我不确定如何在不破坏它的情况下收集附加文本 Qty 输入值。我的理解是 document.getElementsByTagName('input') 能够收集两种输入类型，因为它基本上是在寻找输入标签，所以我只需要弄清楚如何收集和循环通过复选框和文本输入。

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

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

如何收集额外的 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 部分 - 相当直接的答案

您可以使用switch，而不是第二个if 来检查text 输入，如下所示：

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，以便您知道是否已选中数量文本框的相应复选框。

另外，我不确定您希望最终查询字符串如何格式化，因此我将其设置为一个名为 product 的参数，其值是一个管道和逗号分隔的字符串，您可以对其进行解析以提取价值观。所以 url 看起来像这样：

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

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

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

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

Here's a fiddle 展示了更健壮的方式。

您会在其中看到我使用了getElementsByName() 而不是getElementsByTagName()，使用了您已经包含在inputs 中的name 属性：

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 对象构建 url：

// 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>