JavaScript：根據下拉菜單選擇，選中/取消選中復選框
[英]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>
您能告訴我如何使其工作嗎？ 一旦了解了操作方法，便可以將其作為功能應用到我的在線表格中。 謝謝！！！
4 個解決方案
解決方案1
1 2011-10-26 15:47:17
這里有兩個問題。
由於您使用的是一個等號而不是兩個，因此以下條件在每次執行時都會成立。 （=而不是==）。 比較值時，必須始終使用兩個等號。
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') {
// ... ;
}
}
這是更多信息：
解決方案2
0 2011-10-26 15:45:51
首先在“ if”條件下將所有單個“ =”符號變成“ ===”。
if ( foo === bar ){
<<do something>>
}
解決方案3
0 2011-10-26 15:46:26
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之類的庫。
解決方案4
0 2011-10-26 15:53:08
這段代碼可以滿足您的要求：
<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.