Question

如何在单击时将复选框返回到未选中状态？两个复选框选项应该是，＆＃34;是，否＆＃34; ＆＃34;不，是＆＃34;或＆＃34;不，不＆＃34;但是一旦选中了复选框，我可以在买入和卖出之间翻转（正确），但是如何在点击时再次选择一个，再回到未选中的那个？

$('input.checkboxClass').on('click', function() {
    $(this).parent().parent().find('.checkboxClass').prop('checked', false);
    $(this).prop('checked', true)
});

DEMO

Answer 1

而不是所有这些，将复选框转换为单选按钮并使用名称对它们进行分组！如果要取消选择，您可以重置。

<form>
  <table>
    <tr>
      <td>Product 1 </td>
      <td><input type="radio" name="Product1" class="checkboxClass" />Buy</td>
      <td><input type="radio" name="Product1" class="checkboxClass" />Sell</td>        
    </tr>
    <tr>
      <td>Product 2 </td>
      <td><input type="radio" name="Product2" class="checkboxClass" />Buy</td>
      <td><input type="radio" name="Product2" class="checkboxClass" />Sell</td>        
    </tr>
    <tr>
      <td>Product 3 </td>
      <td><input type="radio" name="Product3" class="checkboxClass" />Buy</td>
      <td><input type="radio" name="Product3" class="checkboxClass" />Sell</td>        
    </tr>
    <tr>
      <td colspan="3"><input type="reset" value="Clear All" /></td>
    </tr>
  </table>
</form>

没有JavaScript或没有。

Answer 2

只需将“同级”<td>的复选框设为false，而不是<tr>的所有复选框：

$('input.checkboxClass').on('click', function(e) {
   $(this).parent().siblings().find('.checkboxClass').prop('checked', false);
});

JSFiddle

Answer 3

我认为Praveen的答案是最正确的答案，但如果您仍然需要使用JS，我会这样做（在执行操作之前检查复选框的状态）：

$('input.checkboxClass').on('click', function() {
  if($(this).is(':checked')){
    $(this).parent().parent().find('.checkboxClass').prop('checked', false);
    $(this).prop('checked', true)
  }
  else {
    $(this).prop('checked', false)
  }
});

JSFiddle

Jquery duo复选框，是的，不是，不是不，如何再次取消选择？

3 个答案: