时间戳

首页 > 解决方案 > 如何让 4 组 3 个按钮同时保持点击状态？

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

问题描述

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

标签： phpjqueryhtmlradio-button

解决方案

您可以为每个组使用不同的名称，因为这就是您对单选按钮进行分组的方式

我还修改了，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>

推荐阅读