Как получить значение радиокнопки внутри метки?

Question

новичок здесь, мне было интересно, почему я не могу получить значение переключателя внутри ярлыка?

function myButtonTrigger(c) {
  if (c.value == "1") {
    document.getElementById("id1").style.display = "table-row";
    document.getElementById("id2").style.display = "none";
  } else if (c.value == "2") {
    document.getElementById("id1").style.display = "none";
    document.getElementById("id2").style.display = "table-row";
  } else {}
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  background-color: #39739D;
  color: white;
}

This is my Button

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
            <input value="1" type="radio" name="choices" onClick="myButtonTrigger(this)"></input>Dental
			        </label>
  <label class="btn btn-default">
           <input value="2" type="radio" name="choices" onClick="myButtonTrigger(this)"></input>Rehab
		           </label> </div>

This is the data to be hidden.<br><br>

<table>
  <tr id="id1">
    <td id="id1">Dental Data</td>
    <td id="id1">Specialization Data1</td>
    <td id="id1">Schedule Data</td>
    <td id="id1">Room Data</td>
  </tr>
  <tr id="id2">
    <td id="id2">Rehab Data</td>
    <td id="id2">Specialization Data2</td>
    <td id="id2">Schedule Data</td>
    <td id="id2">Room Data</td>
  </tr>
</table>

Answer 1

Просто используйте свойство .checked

var radioButtons = document.getElementsByName("choices");

function myButtonTrigger() {
  if(radioButtons[0].checked) {
    // first radio button checked
  } else if(radioButtons[1].checked) {
    // second radio button checked
  }
}

Или вы можете использовать селектор запросов, чтобы получить элемент по значению:

if(document.querySelector("input[name='choices'][value='1']").checked)

РЕДАКТИРОВАТЬ: не использовать один и тот же идентификатор для двух илибольше элементов, вы можете использовать его только на теге, и он будет работать.Идентификатор означает личность, уникальную.Несколько хороших альтернатив:

document.getElementsByClassName("class1");
document.querySelectorAll("#id1, #id2, #id3, #id10000, #anotherId");
document.querySelectorAll("table tr#id1 td"); // marks every td in tr with id id1 in table (really, tr and td in table, wow)