Question

我正在为此寻求一种通用的解决方案。

考虑具有相同名称的4个无线电类型输入。提交后，选中的值将确定以以下形式发送的值：

我希望仅在1和3处显示一个文本区域：它始终只在值1上起作用而从不值3上起作用。

下面是代码段。

function getit() {
  var select = document.getElementById('f06_w01').checked;
  if (select == 1 || select == 3) {
    document.getElementById('whitch').style.display = "block";
  } else {
    document.getElementById('whitch').style.display = "none";
  }
}

<input type="radio" id="f06_w01" name="f06_w01" value="1" onchange="getit();" required />
<input type="radio" id="f06_w01" name="f06_w01" value="2" onchange="getit();" required />
<input type="radio" id="f06_w01" name="f06_w01" value="3" onchange="getit();" required />
<input type="radio" id="f06_w01" name="f06_w01" value="4" onchange="getit();" required />

<div id="whitch" style="display: none;">
  <p><b>Whats better?</b></p>
  <p><textarea name="f06_t02" id="f06_t02" cols="80" rows="3"></textarea></p>
</div>

我该如何做？

Answer 1

您没有选择选中的输入单选按钮，而是选择具有该ID的第一个元素，因为ID 应该应该是唯一的。

您可以通过选择选中的输入收音机来修复它：

   function getit(){
        var select = document.querySelector('input[name="f06_w01"]:checked').value;
        if(select == 1 || select == 3) { document.getElementById('whitch').style.display = "block"; }
        else { 
            document.getElementById('whitch').style.display = "none"; 
        }
    }

<input type="radio" name="f06_w01" value="1" 
onchange="getit();" required />
<input type="radio" name="f06_w01" value="2" onchange="getit();" required />
<input type="radio" name="f06_w01" value="3" 
onchange="getit();" required />
<input type="radio" name="f06_w01" value="4" onchange="getit();" required />

<div id="whitch" style="display: none;">
<p><b>Whats better?</b></p>
<p><textarea name="f06_t02" id="f06_t02" cols="80" rows="3"></textarea></p>
</div>

单选按钮的Javascript OnChange事件处理程序

1 个答案: