使用getElementById表达式切换语句

Posted 2021-03-31

是否可以使用方法“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" />

我希望交换机能够获得每个复选框的值，并且它会执行我告诉他的相应信息。我认为问题在于切换的情况但不确定。我尝试用“if”来做，但无法使它工作。

答案

也许是这样的？

如果你打开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>

另一答案

首先，你必须更正函数名称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'或递归迭代。如果元素数量已修复，则可以使用“索引”位置。我不建议这样做，因为这不是一个好习惯。

以上是关于使用getElementById表达式切换语句的主要内容，如果未能解决你的问题，请参考以下文章

lambda 表达式中的 C# 切换

switch语句 switch语句的相关知识

js 宽窄屏切换效果优化感悟

JavaScript-学习一

Javascript：document.getElementById.innerHTML 中的 if-else 语句不起作用

switch case的用法