使用 Javascript 处理具有多个复选框的表单 [关闭]

Question

基本上，我有一个包含多个选项的表单，每个选项都会过滤结果，直到您有特定的结果，它使用 javascript 来执行此操作。

我的问题是我在表单中有一个带有多个复选框的部分，我想要做的是检查每个复选框是否被选中并在选中时显示一些数据。但是可以检查不止一个。

我不能使用任何类型的框架，所以请不要建议，而且我不想要任何大块代码（只有解释清楚的代码），我需要这个向我解释，然后我可以编写自己的代码（所以我可以学习），我只是不知道如何去做。

对所需 Javascript 的任何解释都会有所帮助。

编辑：这是我到目前为止的代码：

function jobs() {
    var shownursing = document.getElementById('nursing-block');

    if (document.getElementsByName("nursing")[0].checked) {
        console.log("hi")
        shownursing.style.display = 'block';
        return true;
    } else { 
        console.log("no")
        shownursing.style.display = 'none';
        return false;
    }
}

jobs();

Answer 1

基本上，您希望在选中复选框时产生一些功能，对吗？您最好的选择是编写一个函数（或一组函数）以在选中复选框时调用。该函数将决定响应复选框显示什么。

我认为您需要与已有代码的主要区别在于您需要将函数调用附加到被选中的复选框的操作上。要在不使用 jQuery 或任何其他框架的情况下以这种方式附加函数，您可以在复选框的 html 中包含 onClick 属性：

<input type="checkbox" id="ch1" onclick="jobs();" />

或者，如果您希望在单击按钮时执行该功能，您可以将其附加到该按钮的onclick。或者，如果您希望它在页面加载时执行，您可以通过在函数外部包含以下代码来实现：

window.onload=jobs;

您还可以结合使用上述方法，在页面加载以及单击复选框或按钮时执行该功能。

在jobs() 中，您可以通过访问DOM 元素并获取.checked 属性来检查复选框的值。请注意，为每个复选框设置一个单独的 id 并以这种方式进行检查是更好的做法（从长远来看，与使用 document.getElementsByName() 生成的数组相比，您遇到的错误要少得多：

if (document.getElementById("ch1").checked)
{
   //take actions related to this checkbox being checked
}

由于您要检查多个复选框，因此您将有几个这样的 if 语句（假设它们是独立的）。如果需要将它们作为一个单元进行处理（即选中两个复选框所做的事情与单独选中每个复选框所做的组合不同），那么您可以在这些 if 语句中设置一些控制变量，然后使用最后的switch语句来控制最终的执行。