Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/423.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用Javascript处理带有多个复选框的表单_Javascript_Html_Forms_Loops_Checkbox - Fatal编程技术网

使用Javascript处理带有多个复选框的表单

使用Javascript处理带有多个复选框的表单,javascript,html,forms,loops,checkbox,Javascript,Html,Forms,Loops,Checkbox,基本上,我有一个表单,其中包括多个选项,每个选项都会过滤结果,直到你有一个特定的结果,它使用javascript来完成这项工作 我的问题是表单中有一个部件带有多个复选框,我要做的是检查是否选中了每个复选框,并在选中时显示一些数据。但是不止一个可以被检查 我不能使用任何类型的框架,所以请不要建议,我不想要任何大的代码块(只有解释得很好的代码),我需要向我解释这个,然后我可以编写自己的代码(这样我就可以学习),我只是不知道该怎么做 对所需Javascript的任何解释都会有所帮助 编辑:这是我到目前

基本上,我有一个表单,其中包括多个选项,每个选项都会过滤结果,直到你有一个特定的结果,它使用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();

基本上,当选中复选框时,您希望使某些功能发生,对吗?最好是编写一个函数(或一组函数)在选中复选框时调用。该函数将决定响应复选框显示的内容

我认为您所需要的与已有代码的关键区别在于,您需要将函数调用附加到正在选中的复选框的操作。要以这种方式附加函数而不使用jQuery或任何其他框架,可以在复选框的html中包含onClick属性:

<input type="checkbox" id="ch1" onclick="jobs();" />
您还可以将上述操作结合使用,以便在页面加载时以及单击复选框或按钮时执行该功能

jobs()
中,您可以通过访问DOM元素并获取
.checked
属性来检查复选框的值。请注意,最好为每个复选框指定一个单独的id,并以这种方式进行检查(从长远来看,与使用
document.getElementsByName()
生成的数组相比,您的bug要少得多):


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

事件处理程序-“更改”。您说“不需要任何代码”,但javascript是代码-所以代码没有代码?或者您可以将其改为“仅解释良好的代码”也许吧?尝试将事件处理程序添加到复选框中,如:
,您还可以使用javascript了解是否选中了该复选框,如:
document.getElementById('box')。选中
@raina77ow您应该使用复选框/收音机的
单击
事件buttons@raina77ow和其他几个来源但这不是只有在点击复选框时才运行函数吗?如果不是,它将永远不会运行?是的,当点击复选框时,这将运行函数。您希望函数何时运行?请参阅我的edit-我包括了一些在复选框未选中时执行函数的替代方法。感谢您迄今为止提供的巨大帮助,但我的javascript是一个外部文件,因此我收到一个引用错误,称尚未定义?您需要确保对
window.onload=jobs;
的调用发生在函数定义之后ion已加载。这意味着,如果将它放在外部文件中,它需要位于末尾。如果将它作为单独的脚本标记放在html中,它需要位于加载外部文件的脚本标记之后。
window.onload=jobs;
if (document.getElementById("ch1").checked)
{
   //take actions related to this checkbox being checked
}