时间戳

首页 > 解决方案 > 使复选框的行为类似于每个表格行的单选按钮

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

问题描述

我有一个 x 行数和一列有 3 个复选框的表。我希望用户从 3 个选项中只选择 1 个。我尝试使用 JQuery，但我遇到的问题是，如果我选择三个选项之一，然后选择另一个相同但在另一行中的选项，我之前选择的选项将被取消选中。

因此，我希望用户从 3 个选项中选择 1 个，但无论表格有多少行，我都希望它能够独立地为每一行工作。

这是我的代码：

$(".chb").change(function() {
    $(this).parent().find(".chb").prop('checked', false);
    $(this).prop('checked', true);   
});
<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>

标签： jqueryhtml

解决方案

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

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

$(".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>

推荐阅读