如何在点击时切换无线电输入元素的检查状态?
问题描述:
如何(点击)单击元素或其容器时检查无线电输入元素?
How to (un)check a radio input element on click of the element or its container?
我已经尝试过以下代码,但它没有取消选中收音机。
I have tried the code below, but it does not uncheck the radio.
HTML:
<div class="is">
<label><input type="radio" name="check" class="il-radio" /> Is </label>
<img src="picture" />
</div>
jQuery:
$(".is label, .is ").click(function () {
if (!$(this).find(".il-radio").attr("checked")) {
$(this).find(".il-radio").attr("checked", "checked");
} else if ($(this).find(".il-radio").attr("checked") == "checked") {
$(this).find(".il-radio").removeAttr("checked");
}
});
答
您必须阻止默认行为。目前,点击后,会发生以下情况:
You have to prevent the default behaviour. Currently, on click, the following happens:
-
点击
容器的事件触发(div.is
)。 -
点击
标签的事件触发。 - 由于你的函数切换状态,并且事件监听器被调用两次,结果似乎没有发生任何事情。
-
click
event fires for the container (div.is
). -
click
event fires for the label. - Since your function toggles a state, and the event listener is called twice, the outcome is that nothing seems to happen.
更正后的代码( http://jsfiddle.net/nHvsf/3/):
$(".is").click(function(event) {
var radio_selector = 'input[type="radio"]',
$radio;
// Ignore the event when the radio input is clicked.
if (!$(event.target).is(radio_selector)) {
$radio = $(this).find(radio_selector);
// Prevent the event to be triggered
// on another element, for the same click
event.stopImmediatePropagation();
// We manually check the box, so prevent default
event.preventDefault();
$radio.prop('checked', !$radio.is(':checked'));
}
});
$(".il-radio").on('change click', function(event) {
// The change event only fires when the checkbox state changes
// The click event always fires
// When the radio is already checked, this event will fire only once,
// resulting in an unchecked checkbox.
// When the radio is not checked already, this event fires twice
// so that the state does not change
this.checked = !this.checked;
});