18

说这是我的 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,则应取消选中所有单选按钮。

我怎样才能做到这一点?

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

更新:由于大多数人不明白我想要什么,让我试着改写一下——我希望单选按钮在切换模式下起作用。我为所有单选按钮赋予了相同的名称,因此它是一个组。现在我希望单选按钮自行切换。例如。如果我点击radio0,如果它被选中,它应该被取消选中,如果它未被选中,它应该被选中。

4

7 回答 7

31

您会发现的问题是,一旦单击单选按钮,它的状态就会更改,然后您才能检查它。我建议添加一个自定义属性来跟踪每个收音机的先前状态,如下所示:

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

于 2013-02-27T06:39:22.140 回答
11

一旦您将 2 个或更多单选按钮的名称命名为相同,它们就会自动成为一个组。在该组中,只能选中一个单选按钮。你已经实现了这一点。

于 2013-02-27T06:22:56.027 回答
4

这段代码解决了我的问题

$("[type='radio']").on('click', function (e) {
    var previousValue = $(this).attr('previousValue');
    if (previousValue == 'true') {
        this.checked = false;
        $(this).attr('previousValue', this.checked);
    }
    else {
        this.checked = true;
        $(this).attr('previousValue', this.checked);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label >Toogle radio button example</label>
<br />
<input type="radio" name="toogle_me" value="mango"> Blue </input>
<input type="radio" name="toogle_me" value="kiwi"> Green </input>
<input type="radio" name="toogle_me" value="banana"> Yellow </input>
<input type="radio" name="toogle_me" value="orange"> Orange </input>

于 2018-08-16T13:34:07.173 回答
0

我为我的自定义收音机使用如下 onClick() :

$(function(){
  // if selected already, deselect
  if ($(this).hasClass('selected') {
    $(this).prop('checked', false);
    $(this).removeClass('selected');
  }
  // else select
  else {
    $(this).prop('checked', true);
    $(this).addClass('selected');
  }
  // deselect sibling inputs
  $(this).siblings('input').prop('checked', false);
  $(this).siblings('input').removeClass('selected');
}
于 2017-08-22T14:54:18.873 回答
0

使用@Goran Mottram 回答只是稍微调整一下以适应单选按钮不是兄弟的情况。

$(".accordian-radio-button").click(function(){
    var wasChecked = true;
    if($(this).data('waschecked') == true){
        $(this).prop('checked', false);
        wasChecked = false;
    }
    $('input[name="ac"]').data('waschecked', false);
    $(this).data('waschecked', wasChecked);
})

<input class="accordian-radio-button" data-waschecked="false" type="radio" name="ac" id="a1" />
于 2018-03-28T23:25:23.133 回答
0

我也遇到了这个问题,在考虑并玩弄了提供的各种小提琴之后,我对提供的解决方案有些不满。

我的主要问题是接受答案的最后一行,需要重置:

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

而且由于我没有使用 jQuery,我必须自己循环并评估兄弟姐妹,这不是什么大不了的事,但对我来说似乎很不雅。但是,使用该方法无法绕过它,因为您将数据集用作信息存储。

玩了之后,我意识到问题在于,当单击收音机时,它会触发单击事件,并且附加到该单击事件的任何功能都会在评估“onchange”事件的功能之前自行完成,更不用说叫。因此,如果单击事件“取消选中”切换,则不会触发任何更改事件

我在这里留下了我失败的尝试: https ://codepen.io/RiverRockMedical/pen/daMGVJ

但是,如果您可以回答“在此点击事件之后会发生更改事件吗?”这个问题?然后你可以得到一个切换工作。

我想出的解决方案可以在这支笔上看到: https ://codepen.io/RiverRockMedical/pen/VgvdrY

但基本上是这样的:

function onClick(e) {
  e.dataset.toDo = 'uncheck';
  setTimeout(uncheck, 1, {
    event:'click',
    id:e.id,
    dataset:e.dataset
  });
}

因此,在单击事件上,设置一个单击已发生的标记,并使用 setTimeout() 创建一个暂停,以允许评估和触发 onchange 事件。

function onChange(e) {
  e.dataset.toDo = 'leave';
}

如果 onchange 事件触发,它会撤消 onclick 事件所做的事情。

function uncheck(radio) {
  log('|');
  if (radio.event !== 'click') return;
  log('uncheck');
  if (radio.dataset.toDo === 'uncheck') {
    document.getElementById(radio.id).checked = false;
    radio.checked = false;
  } 
}

然后,当 uncheck 功能启动时,它具有更改事件是否跟随单击事件的信息。如果不是,则收音机未选中,并用作切换开关。

而且,它基本上是自重置的,所以我不必遍历所有无线电并将它们的数据集重置为函数结束时的初始值。

现在,我确信有一种更酷的 async/await 方法可以做到这一点,它不使用 setTimeout 并且会更加优雅,但我仍在学习,但我无法想出它。还有谁?

于 2019-01-26T21:09:06.640 回答
0
<input type="radio" name="gender" id="male"onclick="getChecked(1)"><label for="male">Male</label>
<input type="radio" name="gender" id="female"onclick="getChecked(2)"><label for="female">female</label>
<script>
  var btnChecked = "";
  function getChecked(i) {
    if(btnChecked == i) {
      btnChecked = "";
      document.getElementsByTagName("input")[i-1].checked = false;
    }
    else btnChecked = i;
  }
</script>    
于 2020-04-30T11:58:43.457 回答