如何在 javascript 中循环获取多个复选框值？

Question

我正在尝试获取不同类别下的选定复选框值（如果已选中）。我有以下代码：

   <table>
                <tr>
                    <th colspan="2">Part A</th>
                    <th colspan="2">Part B</th>
                </tr>
                <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a1" name="PartA"></td>
                    <td  class="style6">A1</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b1" name="PartB"></td>
                    <td class="style6" >B1</td>
                </tr>
                 <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a2" name="PartA"></td>
                    <td  class="style6">A2</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b2" name="PartB"></td>
                    <td class="style6" >B2</td>
                </tr>
                 <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a3" name="PartA"></td>
                    <td  class="style6">A3</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b3" name="PartB"></td>
                    <td class="style6" >B3</td>
                </tr>
                 <tr>
                    <td >
                        <input class="checkbox" type="checkbox" id="chkbox_a4" name="PartA"></td>
                    <td  class="style6">A4</td>
                    <td >
                        <input  class="checkbox" type="checkbox" id="chkbox_b4" name="PartB"></td>
                    <td class="style6" >B4</td>
                </tr>                
</table>

和javascriot代码如下：

<script type="text/javascript">
    function save() {        
        var checkboxPartA;
        var checkboxPartB;
        var ChkboxPartA_value = document.getElementsByName('PartA');        
        for (var checkbox in ChkboxPartA_value) {
            if (checkbox.checked)
                checkboxPartA = checkbox.value.append(checkbox.value + ' , ');            
        }
        
         var ChkboxPartB_value = document.getElementsByName('PartB');      
        for (var checkbox1 in ChkboxPartB_value) {
            if (checkbox1.checked)
                checkboxPartB = checkbox1.value.append(checkbox.value + ' , ');            
        }
    }
    </script>

我的示例图片如下：

我希望输出为 checkboxPartA = a1,a2 //如果选中了 a1,a2 复选框.. B部分也一样。

不知为何，我的代码无法正常工作，函数已触发，但它 return 复选框没有任何值。

（截至目前，我在保存之前检查是否可以获取所有复选框值，但我没有获取任何值。）

请帮助解决此问题。

Answer 1

首先，将 for...in 循环更改为正常的 for 循环

for (var i=0; i<ChkboxPartA_value.length; i++) {
  var checkbox = ChkboxPartA_value[i];
  if (checkbox.checked)
    checkboxPartA = checkbox.value.append(checkbox.value + ' , ');            
}

其次，在你的情况下，复选框值是一个String并且String中没有append方法，你可以使用concat.

复选框的默认值为'on'，您必须将复选框值设置为'a1'、'a2'等

查看：checkbox.value

checkboxPartA = checkboxPartA.concat(checkbox.value + ' , ');  

// or

checkBoxPartA += checkbox.value + ',';

Answer 2

这是一种不使用（错误）使用 table 元素并使用数组来收集与复选框相关的信息的编写方法。请注意，复选框元素没有有用的值，除非您设置一个。请参阅代码内注释以进一步解释一切如何工作。

// Identifies some DOM elements
const
  container = document.getElementById("container-div"),
  checkboxes = container.getElementsByClassName("checkbox"),
  saveBtn = document.getElementById("save-btn");

// Calls `save` whenever user clicks button
saveBtn.addEventListener("click", save);


// Defines click listener
function save(event) {
  const values_A = [], values_B = []; // Arrays to hold collected info

  // Loops through checkboxes
  for (const checkbox of checkboxes) {

    // Collects relevant text if checkbox is checked
    if (checkbox.checked) {
      if (checkbox.classList.contains("PartA")) {
        values_A.push(checkbox.value);
      }
      else if (checkbox.classList.contains("PartB")) {
        values_B.push(checkbox.value);
      }
    }
  }
  // Prints results to the browswer console (converting arrays to strings)
  console.log("PartA:", values_A.join(", ") || "(No boxes checked)");
  console.log("PartB:", values_B.join(", ") || "(No boxes checked)");
  console.log("");
}

span, label { display: inline-block; width: 5em; }
    /* inline-block elements can have a fixed width */
#button-div { margin-top: 1em; }

<div id="container-div">
  <div>
    <span>Part A</span>
    <span>Part B</span>
  </div>
  <div>
    <label><input class="checkbox PartA" type="checkbox" value="A1">A1</label>
    <label><input class="checkbox PartB" type="checkbox" value="B1">B1</label>
  </div>
  <div>
    <label><input class="checkbox PartA" type="checkbox" value="A2">A2</label>
    <label><input class="checkbox PartB" type="checkbox" value="B2">B2</label>
  </div>
  <div>
    <label><input class="checkbox PartA" type="checkbox" value="A3">A3</label>
    <label><input class="checkbox PartB" type="checkbox" value="B3">B3</label>
  </div>
  <div id="button-div">
    <button id="save-btn">SAVE</button>
  </div>
</div>

Answer 3

谢谢@Benny Yen 和@Cat..虽然我使用了你的两个答案，但我仍然没有得到我期望的准确输出，所以我结合了你的答案并最终得到了一个新答案。对于 BEnny 一个，concat，append 对我没有任何作用，我需要循环所以，我使用你的循环并遵循 Cat 代码将数据推送到变量中。

这是我的答案，我得到了预期的输出：

    var PartA_value = document.getElementsByName('PartA');
    var PartB_value = document.getElementsByName('PartB');
    
     var checkboxA = [], checkboxB = [];
var A_val, B_val;
     
     
            for (var i = 0; i < PartA_value.length; i++) {
                var checkbox1 = PartA_value[i];
                if (checkbox1.checked)
                    checkboxA.push(checkbox1.value);   
            }      
            for (var i = 0; i < PartB_value.length; i++) {
                var checkbox1 = PartB_value[i];
                if (checkbox1.checked)
                    checkboxB.push(checkbox1.value);
            }
A_val=checkboxA.join(",")
B_val=checkboxB.join(",")

感谢大家的帮助，对于迟到的回复深表歉意。

如何在 javascript 中循环获取多个复选框值？

How to get multiple checkbox values with loop in javascript?

html

javascript

checkbox