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

Question

我正在创建4组3个按钮，它们连续链接在一起。 一组包括带有对勾标记的按钮，没有按钮的按钮和带有X的按钮。目的是使用这些按钮来显示您对某事还可以，或者不在乎或不需要。

问题是我有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>