I show some checkbox to the user. When a user selects a checkbox, it is checked. If the user selects another checkbox after the first selection, the second checkbox will also be checked, but the first checkbox selected by the user will not be unchecked. I want to make sure that by selecting each check box, the previous check box is removed and several checkbox are not checked at the same time, that is, only one check box has the right to be selected.
$(document).on('change', '.filter-form', function(event) {
event.preventDefault();
$.ajax({
type: 'GET',
url: 'filter/',
data: $(this).serialize(),
dataType: 'json',
success: function(data) {
$('#product-main').html(data['form']);
},
error: function(data) {
alert("error" + data);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" class="filter-form">
<input type="checkbox" name="price" value="new">
<input type="checkbox" name="discount" value="discount">
<input type="checkbox" name="old" value="old">
</form>
