Оператор Switch с выражением getElementById

Question

Можно ли сделать оператор "Switch" с выражением метода "getElementByName", чтобы проверить, имеют ли флажки одинаковые имена?

Это моя функция:

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" />

Я хочу, чтобы коммутатор получал значение каждого флажка и делал то, что ему сказали, соответственно.Я думаю, что проблема со случаями переключения, но не уверен.Я пытался сделать это с помощью «если», но не смог заставить его работать.

Answer 1

Прежде всего, вы должны исправить имя функции 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 looping', 'while looping' или рекурсивно.В случае фиксированного количества элементов вы можете использовать позицию индекса.Я не рекомендую делать это, потому что это не считается хорошей практикой.

Answer 2

Возможно, что-то вроде этого?

Если вы включите 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>