Question

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

我希望该开关将获取每个复选框的值，并且它将相应地执行im告诉他的操作。我认为问题出在切换的情况下，但不确定。我试图用“ if”来做到这一点，但无法使其正常工作。

Answer 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>

Answer 2

首先，您必须更正函数名称 document.getElementsByName（“ q”）; 。您的代码中缺少's'。
第二，如果您有3个或N个具有相同名称的元素，则对象“文档”将为您返回一个包含 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循环”，“ while循环”或递归进行迭代。如果元素数量固定，则可以使用索引位置。我不建议您这样做，因为这不是一个好习惯。

使用getElementById表达式的Switch语句

2 个答案: