我如何切换单选按钮 [英] How can I toggle radiobutton

问题描述

说这是我的HTML：

 < input type =radioname =radid =Radio0 checked =checked/> 
< input type =radioname =radid =Radio1/> 
< input type =radioname =radid =Radio2/> 
< input type =radioname =radid =Radio4/> 
< input type =radioname =radid =Radio3/> 
  

您可以看到第1个单选按钮被选中。我需要单选按钮才能像切换一样工作。例如。如果我再次点击 radio0 ，所有的单选按钮都应该取消选中。 p>

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

更新：由于大多数人不明白我想要什么，让我试着重新措辞 - 我希望单选按钮在切换模式下工作。我已经给所有的单选按钮命名，因此它是一个组。现在我想让单选按钮自行切换。例如。如果我点击radio0，它应该被取消选中，如果它被选中并且检查它是否未被选中。

你会发现问题只要单击一个单选按钮，它的状态就会被更改，然后才能检查它。我建议添加一个自定义属性来跟踪每个电台的先前状态，如下所示：

$ b

  $（function（）{
 $（'input [name =rad]'）。click（function（）{
 var $ radio = $（this）; 
 
 //如果以前检查过
 if（$ radio.data（'waschecked'）== true）
 {
 $ radio.prop（'checked'，false）; 
 $ radio.data（'waschecked'，false）; 
} 
 else 
 $ radio.data（'waschecked'，true）; 
 
 / / remove从其他收音机检查
 $ radio.siblings（'input [name =rad]'）。data（'waschecked'，false）; 
}）; 
}） ; 
  

您还需要将此属性添加到最初选中的无线电标记中

 < input type =radioname =radid =Radio0checked =checked waschecked =true/> 
  

在此处查看演示： http://jsfiddle.net/GoranMottram/VGPhD/2/

Say this is my 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" />

As you can see the 1st radio button is checked. I need the radio button to function like toggle. For eg. If I again click on radio0, all radio buttons should be unchecked.

How can I achieve that?

Update: I don't want any extra buttons. For eg. I could add a button and set the checked property for all radio buttons to be false. However, I don't want that. I only want my form to consist of these 4 radio buttons.

Update: Since most of the people don't understand what I want, let me try to rephrase- I want the radio button to function in toggle mode. I've given the same name to all radio buttons hence it's a group. Now I want the radiobuttons to toggle itself. Eg. if I click on radio0, it should get unchecked if it's checked and checked if it's unchecked.

解决方案

The problem you'll find is that as soon a radio button is clicked its state is changed before you can check it. What I suggest is to add a custom attribute to keep track of each radio's previous state like so:

$(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);
    });
});

You will also need to add this attribute to the initially checked radio markup

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

See demo here : http://jsfiddle.net/GoranMottram/VGPhD/2/

这篇关于我如何切换单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！