在javascript中迭代复选框

Iterating through checkboxes in javascript

本文关键字:复选框 迭代 javascript      更新时间:2023-09-26

我有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()方法。

谢谢

这是因为您要在span中查找innerHTML。

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

amountListconsistencyList内部没有span

就像你在colourList中所做的那样,把这些标签包装在一个span标签中,你就可以了。