如何在javascript中使用回圈獲取多個復選框值？

如果選中，我正在嘗試獲取不同類別下的選定復選框值。我有以下代碼：

   <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 部分也是如此。

不知怎么的，我的代碼不起作用，函式被觸發，但它沒有為復選框回傳任何值。

（截至目前，我在保存之前檢查是否可以獲得所有復選框值，但我沒有獲得任何值。）

請幫助解決這個問題。

uj5u.com熱心網友回復：

首先，將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   ' , ');            
}

其次，在您的情況下，復選框值為 aString并且 中沒有append方法String，您可以使用concat.

復選框的默認值為“on”，您必須將復選框值設定為“a1”、“a2”等。

簽出：checkbox.value

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

// or

checkBoxPartA  = checkbox.value   ',';

uj5u.com熱心網友回復：

這是一種在不（錯誤）使用 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>

標籤：javascript html 复选框

上一篇：如何在輸入文本欄位旁邊對齊懸停文本？

下一篇：html5電子郵件驗證失敗