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个或更多单选按钮的名称相同，它们就会自动成为一个组。在该组中，只能检查一个单选按钮。你已经实现了这个目标。

Answer 3

我为自定义无线电使用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');
}

Answer 4

使用@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" />

Answer 5

此代码解决了我的问题

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

Answer 6

我也曾考虑过这个问题，并且在考虑了提供的各种技巧之后，对提供的解决方案有些不满意。

我的主要问题是接受的答案的最后一行，需要重新设置：

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

由于我没有使用jQuery，所以我必须自己遍历并评估兄弟姐妹，这虽然不算什么，但对我来说却显得微不足道。但是，用这种方法无法解决它，因为您正在使用数据集作为信息存储。

玩了之后，我意识到问题是，当单击广播时，它会触发clicked事件，并且附加到click事件的任何功能都会在之前完成“变更”事件是经过评估的，更不用说了。因此，如果点击事件“取消选中”了切换开关，则永远不会触发更改事件。

我在这里留下了失败的尝试： 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
  });
}

因此，在click事件上，设置发生点击的标记，并使用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;
  } 
}

然后，当取消选中功能启动时，它具有有关更改事件是否在单击事件之后的信息。如果不是，则收音机不会被选中，并可以用作切换按钮。

而且，它基本上是自动重置的，因此我不必遍历所有无线电并将其数据集重置为函数末尾的初始值。

现在，我确定有一个更酷的异步/等待方式来执行此操作，该方法不使用setTimeout，并且会更加优雅，但是我仍在学习，并且我无法提出。还有其他人吗？

Answer 7

<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>

我怎样才能切换radiobutton

7 个答案: