单选按钮选中后不能取消,用以下方法可实现点击取消点击选中,但是有一个问题如果默认是选中的单选按钮,第一次点击不会取消选中,需要点击两次才会取消选中。
$("input[type='radio']").click(function(e) {
// radioClick(e);
// 以下代码更简短
var domName = $(this).attr('name');
var $radio = $(this);
if ($radio.data('waschecked') == true) {
$radio.prop('checked', false);
$("input:radio[name='" + domName + "']").data('waschecked', false);
} else {
$radio.prop('checked', true);
$("input:radio[name='" + domName + "']").data('waschecked', false);
$radio.data('waschecked', true);
}
});
function radioClick(event) {
let domName = $(event.target).prop('name');
let hasChild = $(event.target).hasClass('hasChild')
let $radio = $(event.target);
if ($radio.data('waschecked') == true) {
$radio.prop('checked', false);
$("input:radio[name='" + domName + "']").data('waschecked', false);
if (hasChild) {
let innerName = $radio.parent('label').find('input.innerInput').prop('name');
$radio.parent('label').find('input.innerInput').prop('checked', false);
$("input:radio[name='" + innerName + "']").data('waschecked', false);
}
// $radio.data('waschecked', false);
} else {
$radio.prop('checked', true);
$("input:radio[name='" + domName + "']").data('waschecked', false);
$radio.data('waschecked', true);
if (hasChild) {
let innerName = $radio.parent('label').find('input.innerInput').prop('name');
$("input:radio[name='" + innerName + "']").data('waschecked', false);
$radio.parent('label').find('input.innerInput').eq(0).prop('checked', true);
$radio.parent('label').find('input.innerInput').eq(0).data('waschecked', true);
}
};
}