如何获取使用 Javascript 中的表单对象检查的复选框的值

Question

我是 Javascript 的初学者，我的 Javascript 表单对象有问题。如何循环遍历整个表单对象，仅选择用户检查的元素。到目前为止，我已经尝试了以下方法：

//Gets the selected checkbox values:
function getCbValues() {

    var chkMouse = document.getElementById("chkMouse");
    var chkKeyboard = document.getElementById("chkKeyboard");
    var chkDVD = document.getElementById("chkDVD");
    var chkSound = document.getElementById("chkSound");
    var myFormElem = myForm.elements;

    for (var i = 0; i < myFormElem.length; i++) {
        if (myFormElem[i].type == "checkbox") {
            if (myFormElem.checked == true) {
                if (myFormElem[i].elementId == chkMouse) {
                    alert("This is the Mouse");
                }
                if (myFormElem[i].elementId == chkKeyboard) {
                    alert("This is the Keyboard");
                }
                if (myFormElem[i].elementId == chkDVD) {
                    alert("This is the DVD");
                }
                if (myFormElem[i].elementId == chkSound) {
                    alert("This is the Sound");
                }
            } else {
                alert("Nothing");
            }
        }
    }
}

我已经为所有不同的复选框 ID 声明了所有 var。这是html：

<form action="" name="form1">
 <!--Checkbox table-->
    <table>
        <!--Select Add on Item's-->
        <tr class="firstHeader">
            <th colspan="3">
                <h3>Select Add On Items (Optional):</h3>
            </th>
        </tr>

        <tr>
            <th colspan="2">Add On Items</th>
        </tr>

        <tr>
            <td><label>Mouse</label>
                <td><input type="checkbox" name="chkMouse" value="Mouse" id="chkMouse" price="31" /></td>
        </tr>

        <tr>
            <td><label>Keyboard</label></td>
            <td><input type="checkbox" name="chkKeyboard" value="Keyboard" id="chkKeyboard" price="42" /></td>
        </tr>

        <tr>
            <td><label>DVD Rome Drive</label></td>
            <td><input type="checkbox" name="chkDVD" value="DVD Rome Drive" id="chkDVD" price="56" /></td>
        </tr>

        <tr>
            <td><label>Sound Card</label></td>
            <td><input type="checkbox" name="chkSound" value="Sound Card" id="chkSound" price="83" /></td>
        </tr>
    </table>

如您所见，我已将表单放入表格中。但我的问题是，每当我运行 Javascript 时，返回的值始终为 null 或未定义。我的问题是，如何在 Javascript 中创建一个表单对象，遍历所有这些元素，最后只返回选中的复选框的值。有人可以帮我解决这个问题吗？提前致谢！！

Answer 1

您没有得到任何返回的原因是您的 getCbValues() 函数在您显示的代码中的任何地方都没有被调用。即使是这样，它也只会显示当前状态，因为您还没有设置任何东西来响应更改。

我要做的是设置事件侦听器来检测复选框何时被选中，然后使用该信息执行某些操作。您应该在任何函数之外执行此操作。

你可以像这样设置事件监听器：

var chkMouse = document.getElementById("chkMouse");
chkMouse.addEventListener('change', () => {
        alert('this is the mouse')
      })

假设您要提交带有已检查数据的表单，您可能会将项目添加到数组中，然后在提交时作为表单数据提交。

此外，您还想检查是否有人取消检查您的项目。你可以这样做：

chkMouse.addEventListener('change', () => {
        if (chkMouse.checked) {
          alert('mouse added')
        } else {
          alert('mouse removed')
        }
      })