JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<label>Unsubscribe from all email communications
  <input type="checkbox" name="unsubs-chkbx" class="unsubs-chkbx">
</label>
<table>
  <tr>
    <th scope="col" class="heading">Section Heading</th>
    <th scope="col" class="opt">Opt-in</th>
    <th scope="col" class="opt">Opt-out</th>
  </tr>
  <tr>
    <th scope="row">Group 1</th>
    <td class="btn opt-in"><label>
        <input type="radio" name="radio1" value="radio1">
      </label></td>
    <td class="btn opt-out"><label>
        <input type="radio" name="radio1" value="radi2o">
      </label></td>
  </tr>
  <tr>
    <th scope="row">Group 2</th>
    <td class="btn opt-in"><label>
        <input type="radio" name="radio2" value="radio3">
      </label></td>
    <td class="btn opt-out"><label>
        <input type="radio" name="radio2" value="radio4">
      </label></td>
  </tr>
</table>

CSS

table { margin-left:10px; }
table tr th,
table tr td{ width:50px; border:#666 1px dotted; padding:3px; }

.heading { width:200px; }
.opt, .btn { text-align:center; }

label { display:inline-block; width:302px; cursor:pointer; padding:5px 10px; margin:10px 0 10px 10px; text-align:center; background:#f6f6f6; }

.btn label { display:block; width:auto; cursor:pointer; padding:0; margin:0; background:#fff; }
label:hover { background:#eee; }

input { cursor:pointer; }

JavaScript

$(".unsubs-chkbx").click(function() {
    $('.opt-out input:radio').attr('checked', true);    
});

$(".opt-in input:radio").click(function() {
    $('.unsubs-chkbx').attr('checked', false);    
});