Javascript:检测复选框不适用于只有 1 个复选框的表单.使用 2 个或更多

Javascript: Detect checked boxes isn't working with form with only 1 checkbox. Working with 2 or more

本文关键字：复选框 表单 使用 检测 不适用 适用于 Javascript      更新时间：2023-09-26

我有下面的函数。它从复选框中获取值并将其传输到文本框。它正在工作...但仅当表单具有 2 个或更多复选框时。

<script type="text/javascript">
    function sendValue()
    {
        var all_values = '';
        boxes = document.DataRequest.itens.length
        
            for (i = 0; i < boxes; i++)
            {
                if (document.DataRequest.itens[i].checked)
                {
                    all_values = all_values + document.DataRequest.itens[i].value + ","
        
                }
            }
    
        window.opener.document.getElementById('emailto').value = all_values;
        self.close();
    }
</script>
<form name="DataRequest">
    <input name="itens" type="checkbox" value="name1">
    <input name="itens" type="checkbox" value="name2">
</form>

我是否缺少仅使用 1 个复选框即可完成这项工作的内容？

当有一个项目时。 它不返回数组

  function sendValue()
    {
        var all_values = '';
        boxes = document.DataRequest.itens.length
            if(boxes>1)
            {
            for (i = 0; i < boxes; i++)
            {
                if (document.DataRequest.itens[i].checked)
                {
                    all_values = all_values + document.DataRequest.itens[i].value + ","
                }
            }
            }
           else
             {
              if (document.DataRequest.itens.checked)
                {
                    all_values = document.DataRequest.itens.value 
                }
             }
        window.opener.document.getElementById('emailto').value = all_values;
        self.close();
    }

首先，您需要为输入指定不同的名称：

<form name="DataRequest">
    <input name="item1" type="checkbox" value="name1">
    <input name="item2" type="checkbox" value="name2">
</form>

在您的情况下，对输入使用相同的名称在技术上是可行的，但这是一种糟糕的做法，因为名称通常是不同输入表单的标识。

然后，若要访问输入，必须使用其他语法。可以有多个版本，但您可以这样做：

var boxes = document.forms['DataRequest'].getElementsByTagName('input');
var tokens = [];
for (var i=0; i<boxes.length; i++) {
    if (boxes[i].checked) tokens.push(boxes[i].name+'='+boxes[i].value);
}
var all_values = tokens.join(',');

请注意，使用 join 可避免尾随逗号。

不确定您需要与IE 6 - 8的兼容性，但如果不需要，您可以使用

function serializeChecked() {
   var values = [];
   var checked_boxes = document.querySelectorAll('form[name="DataRequest"] input[checked]');
   for (var i = 0, l = checked_boxes.length; i < l; i++) {
     values.push(checked_boxes[i].getAtrribute('value'))
   }
   return values.join(',');
}

function sendValue() {
  window.opener.document.getElementById('emailto').value = serializeChecked();
}

如果确实需要 IE 支持，请使用文档。DataRequest.getElementsByTagName（'input'） 而不是 QSA，并循环访问它们以收集值（如果它们具有 checked 属性）。

相关文章：