如何使4组3个按钮同时保持单击状态？

Question

我正在创建4组3个按钮，它们连续链接在一起。一组包括带有对号的按钮，没有按钮的按钮和带有X的按钮。目的是使用这些按钮来显示您对某些事情是否满意，或者不在乎或不想。 / p>

问题是我有4组这些按钮，但是我一次只能按下所有4组按钮中的1个！我需要每组按下一个按钮，所以可以同时按下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>