遍歷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內部沒有跨度。

只需像在colourList一樣將這些標簽包裝在span標簽中，您就可以了。