迭代javascript中的複選框

Question

我有3個HTML列表，我試圖通過檢查選中哪些選項並將內部HTML傳遞給Web服務。第一個表id="colorList"正確地傳遞變量，但數量和一致性都不正確，我看不出我做錯了什麼。我試過創建不同的功能，但沒有奏效。

中的JavaScript代碼如下：

function iterateCheckBoxList(listname) { 
    var checkBoxListId = listname; 
    var elementRef = document.getElementById(checkBoxListId); 
    var checkBoxArray = elementRef.getElementsByTagName('input'); 
    var checkedValues = ''; 
    for (var i = 0; i < checkBoxArray.length; i++) { 
     var checkBoxRef = checkBoxArray[i]; 
     if (checkBoxRef.checked == true) { 
      var labelArray = checkBoxRef.parentNode.getElementsByTagName('span'); 
      if (labelArray.length > 0) { 
       if (checkedValues.length > 0) checkedValues += ','; 
       checkedValues += labelArray[0].innerHTML; 
      } 
     } 
    } 
    return checkedValues; 
} 

function updateSymptoms() { 
    Parse.initialize("v9s5EdsZ4u9fSfTpr8SD0u3Xcb56nen1GWge47kV", "fjuiNrsJk3AubBY1zDfosLKDoPxzGgKlUxegxbtx"); 
    var UsualSymptoms = Parse.Object.extend("UsualSymptoms"); 
    var query = new Parse.Query(UsualSymptoms); 
    query.equalTo("PatientID", getUserID()); 
    query.find({ 
     success: function (results) { 
      var object = results[0]; 
      object.set("SputumColour", iterateCheckBoxList("colourList")); 
      object.set("SputumAmount", iterateCheckBoxList("amountList")); 
      object.set("SputumConsistency", iterateCheckBoxList("consistencyList")); 
      object.save(null, { 
       success: function (object) { 
        // The object was saved successfully. 
       }, 
       error: function (object, error) { 
        // The save failed. 
        // error is a Parse.Error with an error code and description. 
        alert('PARSE didnt work'); 
        console.log(error); 
       } 
      }); 
     }, 
     error: function (error) { 
      alert("Error: " + error.code + " " + error.message); 
     } 
    }); 
} 

的HTML代碼低於：

<div class="sputumDetails" style="display:none" id="checkboxdiv"> 
    <h2>Colour</h2> 

    <ul id="colourList" class="lists"> 
     <li><span>Clear</span> 
      <input id="Clear" type="checkbox" class="checkbox" /> 
     </li> 
     <li><span>White</span> 
      <input id="White" type="checkbox" class="checkbox" /> 
     </li> 
     <li><span>Yellow</span> 
      <input id="Yellow" type="checkbox" class="checkbox" /> 
     </li> 
     <li><span>Green</span> 
      <input id="Green" type="checkbox" class="checkbox" /> 
     </li> 
    </ul> 
    <h2>Consistency</h2> 

    <ul id="consistencyList" class="lists"> 
     <li>Watery 
      <input type="checkbox" class="checkbox" /> 
     </li> 
     <li>Sticky 
      <input type="checkbox" class="checkbox" /> 
     </li> 
    </ul> 
    <h2>Amount</h2> 

    <ul id="amountList" class="lists"> 
     <li>1 Teaspoon 
      <input type="checkbox" class="checkbox" /> 
     </li> 
     <li>1 Eggcup 
      <input type="checkbox" class="checkbox" /> 
     </li> 
     <li>Half a cup 
      <input type="checkbox" class="checkbox" /> 
     </li> 
     <li>1 Cup 
      <input type="checkbox" class="checkbox" /> 
     </li> 
    </ul> 
</div> 
<div id="nextSection"> 
    <input onclick="updateSymptoms()" type="button" class="next" value="Next" /> 
    <br/> 
    <br/> 
    <br/> 
</div> 

的onclick方法是updateSymptoms()通過按鈕調用。

謝謝

Answer 1

這是因爲你正在尋找範圍內的innerHTML。

var labelArray = checkBoxRef.parentNode.getElementsByTagName('span'); 

amountList和consistencyList沒有在他們裏面的跨度。

只需將這些標籤包裹在span標籤中，就像您在colourList中所做的那樣，您就會很好。