jquery - 如何对应的复选框互斥

Question

我有一个像这样的复选框列表

现在我希望如果选择Sponge's segment1而不是Spooky's segment's segment1取消选择

<div class="col-md-6" style="height:80%;margin-top:-10px;" >
        <h3>user1</h3>
        <hr style="margin:0px">
        {%for segment in segments[0]["segment"]%}
        {%if segment.id|string in check_boxes_segment%}
        <h5 style="padding:5px">{{segments[0]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" checked class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5>
        {%else%}
        <h5 style="padding:5px">{{segments[0]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5>
        {%endif%}
        {%  endfor %}
      </div>
      <div class="col-md-6" style="height:80%;margin-top:-10px;">
        <h3>user2</h3>
        <hr style="margin:0px">

        {%for segment in segments[1]["segment"]%}
        {%if segment.id|string in check_boxes_segment%}
        <h5 style="padding:5px">{{segments[1]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" checked class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5>
        {%else%}
        <h5 style="padding:5px">{{segments[1]["worker"]}}'s segment{{ loop.index }}&nbsp<label><input type="checkbox" class="segment_checkbox" data-segmentid = "{{segment.id}}"></label></h5>
        {%endif%}
        {%  endfor %}
      </div>

这样做的有效和智能方法是什么？

Answer 1

使用每行具有相同名称的单选按钮，将其设置为复选框

＆＃13;

＆＃13;

label span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #aaa;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  line-height: 20xp;
}

label input {
  display: none;
}

label input:checked + span:before {
  content: '✔';
  display: inline-block;
  font-size: 14px;
}

＆＃13;

<table>
  <tr>
    <td>
      <label>
        <input type="radio" name="name[0]"/>
        <span></span>
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="name[0]"/>
        <span></span>
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <input type="radio" name="name[1]"/>
        <span></span>
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="name[1]"/>
        <span></span>
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <input type="radio" name="name[2]"/>
        <span></span>
      </label>
    </td>
    <td>
      <label>
        <input type="radio" name="name[2]"/>
        <span></span>
      </label>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;