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中一样，你就会很好。

通过javascript中的复选框进行迭代

1 个答案: