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

Question

I'm creating 4 sets of 3 buttons that are linked together in a row. One set includes a button with a checkmark sign and a button with nothing and a button with an X. The purpose is to use the buttons to show if you're Okay with something or don't care or don't want something.

The problem is that I have 4 sets of these buttons, but I can only press down 1 button at at time for all the 4 sets! I need to press down one button per set, so there can be 4 buttons pressed at the same time.

I hope you understand my problem.

 <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

you can use different name for each group because that's how you group radio buttons

I also modified the value because that's how you can know which one is selected later in your JS

note : removed the hidden from the radio because with my browser I can't differentiate pressed button from no-pressed ones hope your css solve this ;)

 <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>