javascript - 第二次单击时取消选中单选按钮

Question

我有很多单选按钮可以从我的数据库中获取一个值，如果它设置为“1”，我会选中单选按钮。

如果一个单选按钮被选中，并且用户再次点击它，我仍然希望能够清除这个按钮。有人有想法吗？

$radio1 从数据库中抓取数据并将是 0、1 或 2

<input value="1" name="radio1" type="radio"<?php if($radio1==1){echo " checked";} ?>>
<input value="2" name="radio2" type="radio"<?php if($radio1==2){echo " checked";} ?>>

Varun Malhotra 的回答略有修改:我更改了 2 行对我来说效果更好的代码。但总的来说，Varun 的回答是完美的!

$('input[type="radio"]').click(function(){
    var $radio = $(this);

    // if this was previously checked
    if ($radio.data('waschecked') == true)
    {
        $radio.prop('checked', false);
        $radio.data('waschecked', false);
    }
    else
    {
         $radio.prop('checked', true);
         $radio.data('waschecked', true);
    }

    // remove was checked from other radios
    $radio.siblings('input[type="radio"]').data('waschecked', false);
});

Answer 1

我建议添加一个自定义属性来跟踪每个 radio 的先前状态，如下所示:

$(function(){
    $('input[name="rad"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    });
});

您还需要将此属性添加到最初检查的单选标记

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

JSFIDDLE DEMO

更新:

 $(function(){
        $('input[name="rad"]').click(function(){
            var $radio = $(this);

            // if this was previously checked
            if ($radio.data('waschecked') == true)
            {
                $radio.prop('checked', false);
                $radio.data('waschecked', false);
            }
            else
                $radio.data('waschecked', true);

            // remove was checked from other radios
            $radio.siblings('input[type="radio"]').data('waschecked', false);
        });
    });

但请确保您没有其他单选组可以使用，否则您必须提供一些属性来指定这些按钮，例如我之前关注的 name prop。