Question

我有一个表，其中包含x个行和一个带有3个复选框的列。我希望用户仅在3个选项中选择1个。我尝试使用JQuery，但是我遇到的问题是，如果我选择三个选项之一，然后选择相同但又在另一行中的另一个选项，则先前选择的选项会被取消选中。

因此，我希望用户从3个选项中选择1个，但是无论表有多少行，我都希望它独立于每一行。

这是我的代码：

cmd test1 test2 -c test3
>
 infile > outfile 2>> err

$(".chb").change(function() {
    $(this).parent().find(".chb").prop('checked', false);
    $(this).prop('checked', true);   
});

Answer 1

编辑：按照@Juan Castillo的建议使用siblings()

当您取消选中其他框时，将搜索范围限制为已更改复选框的同级（共享直接父元素的HTML元素）。另外，摆脱 $(".chb").prop('checked', false);和$(this).prop('checked', true);第一行每次都会取消选中每个复选框（不是您想要的），第二行意味着您无法单击某个框来手动取消选中它（似乎是无意的）。 / p>

$(".chb").change(function() {
  $(this).siblings().prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dtBasicExample">
  <thead>
    <tr>
      <th>Aceptation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type='checkbox' class='chb' name='Total' value='Total'>Total<br>
        <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br>
        <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject
      </td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' class='chb' name='Total' value='Total'>Total<br>
        <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br>
        <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject
      </td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' class='chb' name='Total' value='Total'>Total<br>
        <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br>
        <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject
      </td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

使复选框的行为类似于每个表行的单选按钮

1 个答案: