JQuery duo checkbox, да нет, нет да, нет нет, как отменить выбор еще раз?

Question

Как вернуть флажок обратно в unselected при нажатии? Два параметра флажка должны быть: «да, нет», «нет», «да» или «нет, нет», но как только был выбран флажок, я могу переключаться между покупкой и продажей (правильно), но как отменить выбор, выбранный снова щелчок, возврат к обеим невыбранным?

$('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> к ложным, а не всех флажков вашего <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