Question

如果选择了下拉列表项，我试图勾选一个复选框。例如，如果在下拉列表中选择“输入0”，我想要选中复选框“0被选中”。此外，如果选择“条目0”以外的条目，我希望取消选中“0被选中”复选框。我的代码使用了2个下拉菜单项和2个相应的复选框。目前只有复选框1有效，并且在选择另一个下拉项时不会取消选择。

我已经在网上搜索了几个小时，似乎无法找到解决方案。我是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>

你能告诉我怎么让它运转吗？一旦我理解了如何做到这一点，我就可以将它作为一个功能应用到我的在线表单中。感谢!!!

Answer 1

这里有几个问题。

以下条件在每次执行时都是正确的，因为您使用的是一个等号而不是两个。（=而不是==）。在比较值时，您需要始终使用两个等号。

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

以下是更多信息：

http://www.mredkj.com/tutorials/tutorial002.html

Answer 2

首先在“if”条件下将所有单个“=”符号变为“===”。

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

Answer 3

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这样的库。

Answer 4

此代码可以满足您的需求：

<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增加一个。

℃。重复，直到i等于2，此时它无法找到类似的复选框，并停止。

清除所有复选框后，将选中相应的复选框。

另一个最后的注释：在javascript中，您可以使用括号语法访问对象的属性。这意味着，object1.property1直接等同于object1["property1"]。

干杯，我希望这有帮助。

JavaScript：根据下拉菜单选项选中/取消选中框

4 个答案: