我怎样才能切换radiobutton

Question

说这是我的HTML:

<input type="radio" name="rad" id="Radio0" checked="checked" />
<input type="radio" name="rad" id="Radio1" />
<input type="radio" name="rad" id="Radio2" />
<input type="radio" name="rad" id="Radio4" />
<input type="radio" name="rad" id="Radio3" />

如您所见,选中了第一个单选按钮.我需要单选按钮才能像切换一样运行.例如.如果我再次单击radio0,则应取消选中所有单选按钮.

我怎样才能做到这一点？

更新:我不想要任何额外的按钮.例如.我可以添加一个按钮,并将所有单选按钮的checked属性设置为false.但是,我不希望这样.我只希望我的表单由这4个单选按钮组成.

更新:由于大多数人不理解我想要的东西,让我尝试改写 - 我希望单选按钮在切换模式下运行.我为所有单选按钮指定了相同的名称,因此它是一个组.现在我想让radiobuttons切换自己.例如.如果我点击radio0,它应该被取消选中,如果它被检查并检查它是否未选中.

Answer 1

您会发现的问题是,只要单击一个单选按钮,就会更改其状态,然后才能进行检查.我建议添加一个自定义属性来跟踪每个无线电的先前状态,如下所示:

$(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" />

请参阅此处的演示:http://jsfiddle.net/GoranMottram/VGPhD/2/

Answer 2

一旦您给出2个或更多单选按钮的名称相同,它们就会自动成为一个组.在该组中,只能检查一个单选按钮.你已经实现了这个目标.