Как сделать так, чтобы 4 набора по 3 кнопки оставались нажатыми одновременно?

Question

Я создаю 4 набора из 3 кнопок, которые связаны друг с другом в ряд. Один набор включает в себя кнопку с галочкой и кнопку с ничем и кнопку с буквой X. Цель состоит в том, чтобы использовать кнопки, чтобы показать, в порядке ли вы с чем-то, или вам все равно или что-то не нужно.

Проблема в том, что у меня есть 4 набора этих кнопок, но я могу нажимать только 1 кнопку одновременно для всех 4 наборов! Мне нужно нажимать одну кнопку на комплект, чтобы одновременно можно было нажимать 4 кнопки.

Надеюсь, вы понимаете мою проблему.

<div id="midt">
  <div id="box1">
    <h1>Musik</h1>
    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad1" onclick="this.previousElementSibling.checked=true;">&#10003</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad2" onclick="this.previousElementSibling.checked=true;">&#10005</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad3" onclick="this.previousElementSibling.checked=true;">&#10005</button>
  </div>

  <div id="box2">
    <h1>Børn</h1>
    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad1" onclick="this.previousElementSibling.checked=true;">&#10003</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad2" onclick="this.previousElementSibling.checked=true;">&#10005</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad3" onclick="this.previousElementSibling.checked=true;">&#10005</button>
  </div>
</div>

<div id="midt2">
  <div id="box3">
    <h1>Dyr</h1>
    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad1" onclick="this.previousElementSibling.checked=true;">&#10003</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad2" onclick="this.previousElementSibling.checked=true;">&#10005</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad3" onclick="this.previousElementSibling.checked=true;">&#10005</button>
  </div>

  <div id="box4">
    <h1>Rygning</h1>
    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad1" onclick="this.previousElementSibling.checked=true;">&#10003</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad2" onclick="this.previousElementSibling.checked=true;">&#10005</button>

    <input type="radio" hidden name="_groupname" value="what-gets-submitted" />
    <button type="button" class="cstm-rad3" onclick="this.previousElementSibling.checked=true;">&#10005</button>
  </div>
</div>

Answer 1

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

Я также изменил value, потому что именно так вы можете узнать, какой из них будет выбран позже в вашем JS

примечание: убрал скрытое из радио, потому что с моим браузером я не могу отличить нажатую кнопку от не нажатой, надеюсь, что ваш css решит это;)

<div id="midt"> 
    <div id="box1">
        <h1>Musik</h1>
            <input type="radio" name="_groupname1" value="yes" />
            <button type="button" class="cstm-rad1" onclick="this.previousElementSibling.checked=true;">&#10003</button>

            <input type="radio" name="_groupname1" value="noCare" />
            <button type="button" class="cstm-rad2" onclick="this.previousElementSibling.checked=true;">&#10005</button>

            <input type="radio" name="_groupname1" value="no" />
            <button type="button" class="cstm-rad3" onclick="this.previousElementSibling.checked=true;">&#10005</button>
    </div>

    <div id="box2">
        <h1>Børn</h1>
            <input type="radio" name="_groupname2" value="yes" />
            <button type="button" class="cstm-rad1" onclick="this.previousElementSibling.checked=true;">&#10003</button>

            <input type="radio" name="_groupname2" value="noCare" />
            <button type="button" class="cstm-rad2" onclick="this.previousElementSibling.checked=true;">&#10005</button>

            <input type="radio" name="_groupname2" value="no" />
            <button type="button" class="cstm-rad3" onclick="this.previousElementSibling.checked=true;">&#10005</button>
    </div>
</div>