如何让 4 组 3 个按钮同时保持点击状态？答案

【问题标题】：How do i make 4 sets of 3 buttons stay clicked in at the same time?如何让 4 组 3 个按钮同时保持点击状态？
【发布时间】：2019-06-08 08:00:52
【问题描述】：

我正在创建 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>

【问题讨论】：

如果你需要 css 我也可以把它放进去！ :D ?
我认为为每个组使用不同的名称是一种解决方案
@jonatjano 我正要说同样的话。该名称会将单选按钮组合为一个。 box1 使用一个组名 (name)，box2 使用 1 等。
我没有看到 PHP，但问题被标记为。您可以使用sn-p函数插入可运行的代码，包括html、javascript和css分隔。
是的，由于有脚本控制的隐藏元素，我猜视觉“选中”效果是基于CSS的。如果您可以在进入问题编辑模式后单击“编辑上面的 sn-p”将其添加到 sn-p 中将会很有用。

标签： php jquery html radio-button

【解决方案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>

【讨论】：

哇，谢谢大家！解决方案是更改隐藏名称！ :D