6

I have a LOT of radio buttons that grab a value from my database and if it is set to "1", I make the radio button checked.

If a radio button is checked, and a user clicks on it again, I still want to be able to clear this button. Does anyone have an idea?

$radio1 grabs data from database and will be either 0, 1, or 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's Answer slightly modified: I changed 2 lines of code that worked a little better for me. But overall, Varun's answer was PERFECT!

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

7 回答 7

12

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

$(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 演示

更新：

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

于 2013-11-10T21:07:13.967 回答
3

这应该比其他解决方案更普遍，因为它可以处理所有无线电不在同一个父级的情况。

var $radios = $('input[type="radio"]');
$radios.click(function () {
  var $this = $(this);
  if ($this.data('checked')) {
    this.checked = false;
  }
  var $otherRadios = $radios.not($this).filter('[name="'
                                               + $this.attr('name') + '"]');
  $otherRadios.prop('checked', false).data('checked', false);
  $this.data('checked', this.checked);
});
于 2017-07-09T20:33:01.477 回答
1

当您第一次单击时，更改事件会在单击之前触发。你可以使用它们。与许多单选组一起工作，即使您已经预先检查了单选按钮。

$("input[type=radio]").each(function() {
    var secondClick = true;
    $(this).change(function() {
        secondClick = false;
    });
    $(this).click(function() {
        if (secondClick) {
            $(this).prop("checked", false);
        }
        secondClick = true;
    });
});

JSFIDDLE 演示

于 2014-06-17T15:39:54.083 回答
1

尝试这个

 $('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
                    $('input[name="rad"]').not($(this)).data('waschecked', false);
                });
于 2020-03-03T03:33:26.557 回答
0 
$("input[type=radio]").on('click', function () {
    if ($(this).is(':checked')) {
        $(this).prop("checked", false);
    } else {
        $(this).prop("checked", true);
    }
});
于 2016-10-10T11:51:52.147 回答
0

我不知道确切原因，但用户softvar选择的答案对我不起作用，所以经过大约两个小时的尝试，我根据 softvar 的答案提出了以下内容。把它放在这里以防它可以帮助别人。您可以根据从数据库中获得的“选定”值将 HTML 中的“数据活动”指定为 0 或 1。

<input type="radio" name="user" value="1" data-active="0"> User 1
<input type="radio" name="user" value="2" data-active="0"> User 2

和

$('input[name="user"]').on('click', function() {
    if ($(this).data('active') == 0) {
        $('input[name="user"]').data('active', 0);
        $(this).data('active', 1);
    } else {
        $(this).data('active', 0);
        $(this).prop('checked', false);
    }
});
于 2019-02-26T11:38:13.897 回答
0

这是我的解决方案，它适用于触摸设备以及鼠标点击：

$('input[type=radio]').bind('touchstart mousedown', function() {
    this.checked = !this.checked
}).bind('click touchend', function(e) {
    e.preventDefault()
});

https://codepen.io/robbiebow/pen/bjPvEO

于 2018-08-16T18:12:42.573 回答