[英]JavaScript: Check/Uncheck box depending on dropdown menu selection
如果选择了下拉列表项,我试图获得一个复选框以勾选其自身。 例如,如果在下拉列表中选择了“条目0”,则我希望选中“选择了0”复选框。 另外,如果选择了除“条目0”以外的其他条目,则我希望取消选中“选择0”复选框。 我使用的代码使用2个下拉菜单项和2个相应的复选框。 当前仅复选框1有效,并且在选择另一个下拉项时不会取消选择。
我已经在互联网和Google上搜索了几个小时,但似乎找不到解决方案。 我是JavaScript的新手,但需要在线表格。 (一旦我了解了如何使该解决方案生效,我应该可以将其放入在线表单中。)
<body>
<script language="JavaScript">
function onChange() {
if (document.formName3.selectName3 = 'Entry 0')
//{ alert("Option changed")
{ document.formName3.c_0.checked = true;
document.formName3.c_1.checked = false;
}
else if (document.formName3.selectName3 = 'Entry 1')
//{ alert("Option changed")
{document.formName3.c_1.checked = true;
document.formName3.c_0.checked = false;
}}
{ alert("Begin")
document.formName3.c_1.checked = true;
}
</script>
<form
name="formName3" id="formName3"
onSubmit="return false;"
>
<p>
<select
name="selectName3"
onChange="onChange()"
>
<option
value="Option 0" selected="selected"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<p>
<input name="c_0" type="checkbox" id="c_0" />
<label for="c_0">0 Is selected</label>
</p>
<p>
<input name="c_1" type="checkbox" id="c_1" />
<label for="c_1">1 Is selected</label>
</p>
</form>
</body>
</html>
您能告诉我如何使其工作吗? 一旦了解了操作方法,便可以将其作为功能应用到我的在线表格中。 谢谢!!!
这里有两个问题。
由于您使用的是一个等号而不是两个,因此以下条件在每次执行时都会成立。 (=而不是==)。 比较值时,必须始终使用两个等号。
if (document.formName3.selectName3 = 'Entry 0')
其次,您尝试查找当前所选选项的值的方式不正确。 代替:
document.formName3.selectName3
您可以使用以下内容:
document.formName3.selectName3.options[document.formName3.selectName3.selectedIndex].value
还有许多其他方法,但这是可以接受的。
为了将这两个建议放在一起,代码现在变为:
function onChange() {
var selectValue = document.formName3.selectName3.options[document.formName3.selectName3.selectedIndex].value;
if (selectValue == 'Entry 0') {
document.formName3.c_0.checked = true;
document.formName3.c_1.checked = false;
} else if (selectValue == 'Entry 1') {
// ... ;
}
}
这是更多信息:
首先在“ if”条件下将所有单个“ =”符号变成“ ===”。
if ( foo === bar ){
<<do something>>
}
if (document.formName3.selectName3 = 'Entry 0')
这是分配而不是相等性检查。 使用==
或===
。
在上面的代码中,第一个if
始终计算为true
。
document.formName3.selectName3
返回DOM元素,而不是值。
要从选择框中获取选定的值,请执行以下操作:
var index = document.formName3.selectName3.selectedIndex;
var selectedValue = document.formName3.selectName3.options[ index ].value;
如果您有很多选项和复选框,则代码将变得相当广泛,并且很难维护。 您可能要考虑使用jQuery或Prototype之类的库。
这段代码可以满足您的要求:
<html>
<body>
<script type="text/javascript">
function onChange() {
var selectBox = document.formName3.selectName3;
var val = selectBox.value;
i = 0;
while(document.formName3["c_" + (i++)])
document.formName3["c_" + (i++)].checked = false;
document.formName3["c_" + val].checked = true;
}
</script>
<form name="formName3" id="formName3" onSubmit="return false;">
<p>
<select name="selectName3" onChange="onChange()">
<option value="0" selected="selected">Entry 0</option>
<option value="1">Entry 1</option>
</select>
</p>
<p>
<input name="c_0" type="checkbox" id="c_0" />
<label for="c_0">0 Is selected</label>
</p>
<p>
<input name="c_1" type="checkbox" id="c_1" />
<label for="c_1">1 Is selected</label>
</p>
</form>
</body>
</html>
一些帮助您学习的指针:
选择框的当前值是通过selectBox.value
获得的。 此值等于当前所选选项的value
内容。
该函数首先利用几个javascript功能清除所有复选框。 注意while
循环。 那是什么:
A.如果存在一个名为document.formName3["c_" + (i++)]
的元素,该元素直接等效于document.formName3.c_0
,则将其值设置为false。
B.将i
加1。
C.重复,直到i
等于2,这时找不到这样的复选框,然后停止。
清除所有复选框后,将选中相应的复选框。
另一个最后的注意事项:在javascript中,您可以使用方括号语法访问对象的属性。 这意味着object1.property1
直接等效于object1["property1"]
。
干杯,我希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.