如何在单击时切换单选输入元素的检查状态？

Posted 2023-03-05

【中文标题】如何在单击时切换单选输入元素的检查状态？

【英文标题】：How to toggle the check state of a radio input element on click?

【发布时间】：2012-04-02 01:04:47

【问题描述】：

如何在单击元素或其容器时（取消）检查单选输入元素？

我已经尝试了下面的代码，但它并没有取消选中收音机。

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");
    
);

【问题讨论】：

为什么不直接使用原始形式的标签？ w3schools.com/tags/tag_label.asp

@OriesokVlassky：因为这将要求每个输入控件都有一个 ID，以便标签引用它。 <label><input>...</label> 是有效的 HTML；它应该可以工作。

检查***.com/questions/2117538/…

【参考方案1】：

您必须阻止默认行为。目前，点击时会发生以下情况：

click 为容器 (div.is) 触发事件。 为标签触发click 事件。 由于您的函数切换了一个状态，并且事件监听器被调用了两次，结果似乎什么都没有发生。

更正的代码（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;
);

【讨论】：

你能做到吗，如果我点击收音机，它自己也会检查它吗？

现在图片不会触发选择。

@agam360 以前，event.target 属性被用作参考。那是错误的，现在已经解决了。

演示链接“错误 404”

@Elyor 修复了断开的链接。

【参考方案2】：

单选按钮不要取消勾选，需要使用复选框（type = 'checkbox'）

【讨论】：

你能给我一个收音机的正确方法吗？

一个单选按钮通常只有在单击另一个具有相同“名称”属性的单选按钮时才会被取消选中，这是基本的 HTML

单选按钮以这种方式工作。如果你想要一个“check-uncheck”行为，你应该使用 Checkbox

你为什么要修改一个单选按钮来做一个复选框不需要任何额外工作就可以做的事情？

@Juhana，我有两个是类，我只需要选择其中一个。

【参考方案3】：

仅使用 html ，功能相同

<label for="rdio"><input type="radio" name="rdio" id="rdio" class="il-radio"  /> Is </label>

【讨论】：

当控件是标签中唯一的控件时，不需要for 属性。