1

我有 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()由按钮调用。

谢谢

4

1 回答 1

1

这是因为您正在跨度内寻找 innerHTML。

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

amountList并且consistencyList它们内部没有跨度。

只需将这些标签包装在跨度标签中，就像您在中所做的那样colourList，您会很好。

于 2013-01-02T22:56:46.457 回答