HTML для нескольких радиогрупп с одинаковым именем

Question

Каков самый доступный способ разбить одну радио-форму (с тем же именем) на группы? Например, выбирая время с группами Сегодня или Завтра?

Возможно, разделить их на два набора полей?

<h3>Select a time and we'll give you a call</h3>
<form>
  <fieldset>
    <legend>Today</legend>
    <input type="radio" name="phone" id="a" value="a"/>
    <label for="a">9am</label>

    <input type="radio" name="phone" id="b" value="b"/>
    <label for="b">12pm</label>

    <input type="radio" name="phone" id="c" value="c"/>
    <label for="c">5pm</label>
  </fieldset>
  <fieldset>
    <legend>Tomorrow</legend>
    <input type="radio" name="phone" id="d" value="d"/>
    <label for="d">9am</label>

    <input type="radio" name="phone" id="e" value="e"/>
    <label for="e">12pm</label>

    <input type="radio" name="phone" id="f" value="f"/>
    <label for="f">5pm</label>
  </fieldset>
</form>

Answer 1

Наилучшим подходом, похоже, является использование нескольких наборов полей, и в этом конкретном примере мы хотим прояснить легенды, как предложено Грэм Ритч ie. VoiceOver повторяет легенду на каждой радиостанции, поэтому добавление ее на метку также было излишним.

<h3>Select a time and we'll give you a call</h3>
<form>
  <fieldset>
    <legend><span class="visually-hidden">Call me</span> Today</legend>
    <input type="radio" name="phone" id="a" value="a"/>
    <label for="a">9am</label>

    <input type="radio" name="phone" id="b" value="b"/>
    <label for="b">12pm</label>

  </fieldset>
  <fieldset>
    <legend><span class="visually-hidden">Call me</span> Tomorrow</legend>
    <input type="radio" name="phone" id="d" value="d"/>
    <label for="d">9am</label>

    <input type="radio" name="phone" id="e" value="e"/>
    <label for="e">12pm</label>
  </fieldset>
</form>

Answer 2

Я обновил ответ. Не уверен, что вы можете сделать это с помощью переключателей, но флажки и некоторые javascript должны помочь.

function group1(e){

var id = e.target.id;

var boxes = document.getElementsByTagName('input');

for(let i=0;i<3;i++){
   if (boxes[i].id != id)boxes[i].checked=false;
}

}

function group2(e){

var id = e.target.id;

var boxes = document.getElementsByTagName('input');

for(let i=3;i<6;i++){
   if (boxes[i].id != id)boxes[i].checked=false;
}

}

<h3>Select a time and we'll give you a call</h3>
<form>
  <fieldset>
    <legend>Today</legend>
    <input type="checkbox" name="phone[]" onClick='group1(event)' id="a" value="a"/>
    <label for="a">9am</label>

    <input type="checkbox" name="phone[]" onClick='group1(event)' id="b" value="b"/>
    <label for="b">12pm</label>

    <input type="checkbox" name="phone[]" onClick='group1(event)' id="c" value="c"/>
    <label for="c">5pm</label>
  </fieldset>
  <fieldset>
    <legend>Tomorrow</legend>
    <input type="checkbox" name="phone[]" onClick='group2(event)' id="d" value="d"/>
    <label for="d">9am</label>

    <input type="checkbox" name="phone[]" onClick='group2(event)' id="e" value="e"/>
    <label for="e">12pm</label>

    <input type="checkbox" name="phone[]" onClick='group2(event)' id="f" value="f"/>
    <label for="f">5pm</label>
  </fieldset>
</form>