带有 getElementById 表达式的 Switch 语句答案

【问题标题】：Switch Statement with getElementById expression带有 getElementById 表达式的 Switch 语句
【发布时间】：2018-09-24 15:05:28
【问题描述】：

是否可以使用“getElementByName”方法的表达式来创建“Switch”语句，以检查复选框是否具有相同的名称？

这是我的功能：

function finalOutput() {
var text, text2, q = document.getElementByName("checker").value;

switch(q){
    case 1:
        text = "my role is role1";
    break;
    case 2:
        text = "my role is role2";
    break;
    case 3:
        text = "my role is role3";
    break;
    case 4:
        text2 = "my parameter is parameter1";
    break;
    case 5:
        text2 = "my parameter is parameter2";
    break;
    case 6:
        text2 = "my parameter is parameter3";
    break;
    default:
    text = "Please check if you fill all details...";
    }
document.getElementById("output").innerHTML = text;
document.getElementById("output2").innerHTML = text2;
}

这是 html 中的复选框：

role1:  <input type="checkbox" id="1" onclick="selectOnlyThis(this.id)" 
value="1" name="checker"/> </br>
role2:  <input type="checkbox" id="2" onclick="selectOnlyThis(this.id)"         
value="2" name="checker"/> </br>
role3:  <input type="checkbox" id="3" onclick="selectOnlyThis(this.id)"     
value="3" name="checker"/> </br>
parameter1:  <input type="checkbox" id="4" 
onclick="selectOnlyThis2(this.id)" value="4" name="checker" /> </br>
parameter2:  <input type="checkbox" id="5" 
onclick="selectOnlyThis2(this.id)" value="5" name="checker" /> </br>
parameter3:  <input type="checkbox" id="6" 
onclick="selectOnlyThis2(this.id)" value="6" name="checker" />

我希望开关能够获取每个复选框的值，并且它会执行我告诉他的相应操作。我认为问题出在 switch 的情况下，但不确定。我试着用“if”来做，但不能让它工作。

【问题讨论】：

请点击<> sn-p 编辑器并创建一个minimal reproducible example - selectOnlythis 在哪里？
如果您将函数 finalOutput() { 更改为 selectOnlyThis(q) 并删除 `q = document.getElementByName("checker").value;` 您的代码可能会更好地工作

标签： javascript html if-statement checkbox switch-statement

【解决方案1】：

也许是这样的？

如果打开q，则需要测试“1”等，如果要q===1，则需要+q转换为数字

function selectOnlyThis(q) {
  var text = "Please check if you fill all details...",
     text2 = "";
     console.log(q)
  switch (+q) {
    case 1:
      text = "my role is role1";
      break;
    case 2:
      text = "my role is role2";
      break;
    case 3:
      text = "my role is role3";
      break;
    case 4:
      text2 = "my parameter is parameter1";
      break;
    case 5:
      text2 = "my parameter is parameter2";
      break;
    case 6:
      text2 = "my parameter is parameter3";
      break;
  }
  document.getElementById("output").innerHTML = text;
  document.getElementById("output2").innerHTML = text2;
}

role1:      <input type="checkbox" id="1" onclick="selectOnlyThis(this.id)" value="1" name="checker" /> </br>
role2:      <input type="checkbox" id="2" onclick="selectOnlyThis(this.id)" value="2" name="checker" /> </br>
role3:      <input type="checkbox" id="3" onclick="selectOnlyThis(this.id)" value="3" name="checker" /> </br>
parameter1: <input type="checkbox" id="4" onclick="selectOnlyThis(this.id)" value="4" name="checker" /> </br>
parameter2: <input type="checkbox" id="5" onclick="selectOnlyThis(this.id)" value="5" name="checker" /> </br>
parameter3: <input type="checkbox" id="6" onclick="selectOnlyThis(this.id)" value="6" name="checker" />
<span  id="output"></span>
<span  id="output2"></span>

【讨论】：

【解决方案2】：

首先，您必须更正函数名称 document.getElementsByName("q"); 您的代码中缺少一个 's'。
其次，如果您有 3 或 N 个具有相同名称的元素，则对象“document”将为您返回一个包含 3 或 N 个对象的列表例如：

<div class="ps-relative">
    <input name="q" type="text" value="test" />
    <input name="q" type="text" value="Hello world" />
</div>

var myElements = document.getElementsByName("q");

myElements[0] // has the input element including his value 'test'
alert(myElements[0].value);

myElements[1] // has the input element including his value 'Hello world'
alert(myElements[1].value);

注意。要通过所有元素，您必须使用“for looping”、“while looping”或递归进行迭代。如果元素的数量是固定的，您可以使用索引位置。我不建议这样做，因为这不是一个好的做法。

【讨论】：