JavaScript：根據下拉菜單選擇選中/取消選中框

我想要勾選自己的複選框，如果選擇了下拉列表項目。例如，如果在下拉列表中選擇了「條目0」，我希望選中「0 is selected」複選框。此外，如果選擇了「條目0」以外的條目，我希望取消選中「0 is selected」複選框。我使用的代碼有2個下拉菜單項和2個相應的複選框。目前只有複選框1工作，並且不會取消選擇何時選擇另一個下拉項目。JavaScript：根據下拉菜單選擇選中/取消選中框

我已經搜索了網絡和谷歌幾個小時，似乎無法找到解決方案。我是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>

你能不能讓我知道如何得到它的工作嗎？一旦我明白如何做到這一點，我可以將其作爲一項功能應用於我的在線表單。謝謝！

來源

2011-10-26 user1014889

考慮使用jQuery。它會讓你的代碼更好，更短，更容易編寫。 – ThiefMaster

Summing ThiefMaster的評論 - 「少寫點，多做點」 –

你的戒備（「開始」）在功能之外，是你想要的嗎？ – Birey

首先在'if'條件下將所有單個「=」符號轉換爲「===」。

if (foo === bar){ 
<<do something>> 
}

來源

2011-10-26 15:45:51

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這樣的庫。

來源

2011-10-26 15:46:26 BGerrissen

這裏有幾個問題。

以下條件將在每次執行時都爲真，因爲您使用的是一個等號而不是兩個。（=而不是==）。比較值時，您總是需要使用兩個等號。

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') { 
     // ... ; 
    } 
}

來源

2011-10-26 15:47:17

Upvote打字比我快（darn iPad） –

此代碼你想要做什麼：

<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循環。所做的是：

答：如果名爲document.formName3["c_" + (i++)]的元素直接等價於document.formName3.c_0，則將其值設置爲false。

B.增加i一。

C.重複，直到i等於2，此時它不能找到這樣的複選框並停止。

所有複選框都被清除後，會選中相應的複選框。

另一個最後的注意事項：在javascript中，您可以通過使用括號語法來訪問對象的屬性。這意味着，object1.property1直接等於object1["property1"]。

乾杯，我希望這可以幫助。

來源

2011-10-26 15:53:08

JavaScript：根據下拉菜單選擇選中/取消選中框

回答

相關問題