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

Question

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

到目前为止，我已经设法收集复选框的值，并把它们放到一个字符串中，但我不知道如何收集额外的文本数量输入值而不打破它。我的理解是，document.getElementsByTagName（'input'）能够收集两种输入类型，因为它基本上是查找输入标签，所以我只需要弄清楚如何收集和循环复选框和文本输入。

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

这是我迄今为止的工作代码，它收集复选框的值并将它们放入一个字符串中。如果您选中复选框并按下按钮，则数值将作为字符串返回。请注意，目前没有任何内容附加到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

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

1部分 - 相当直接的答案

相反的第二if来检查text输入，您可以使用switch，像这样：

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元素位置，因此添加元素或移动周围可能会破坏事情。更强大的方法是在每个复选框与其相应的Qty文本框之间建立一个确定的链接 - 例如，为每个Qty文本框添加一个属性，如data-product-id，并将其值设置为相应复选框的value。

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

你会看到在那里，我用getElementsByName()，而不是getElementsByTagName()，使用您已经包含在input S上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 
    } 
} 

然后我收集数量文本框和利用每个人的data-product-id属性的值（我不得不添加的标记），DETE如果复选框被选中rmine：

// 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(){ 
 
\t var checkStatus = document.querySelectorAll('#basket li'), 
 
    \t \t urls = []; 
 
    Array.prototype.forEach.call(checkStatus, function(item){ 
 
    var details = item.childNodes, 
 
    \t urlTemplate = '/urlcheckout/add?product=', 
 
    \t 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>