ChatGPT解决这个技术问题 Extra ChatGPT

如何取消选中单选按钮?

我有一组单选按钮,我想在使用 jQuery 提交 AJAX 表单后取消选中它们。我有以下功能:

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

借助此功能,我可以清除文本框中的值,但无法清除单选按钮的值。

顺便说一句,我也尝试了 $(this).val("");,但没有奏效。

您不需要每个功能。你可以在 jQuery 对象上调用你想要的函数。请看下面我的回答
不需要 each() 函数.. jQuery("input:radio").removeAttr("checked");

m
mjv

要么(纯js)

this.checked = false;

或 (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

关于 attr()prop() 之间区别的解释以及为什么 prop() 现在更可取的解释请参见 jQuery prop() help page
prop() 与2011 年 5 月的 jQuery 1.6。


PPL,请注意他的行为在 1.6 上发生了变化,有利于 prop(),而 .attr() 将仅限于实际属性
那么这里最好使用纯JS吗?
@Pete:我想说,如果您有一个基于 jQuery 构建的系统,那么给您带来的额外优势是,如果有一个浏览器可以以不同方式处理这个问题,您将能够将浏览器支持委托给库。但是,如果您的软件当前不使用 jQuery,那么仅仅为此而实际包含库是不值得的。
@David Hedlund:我想您是在暗示所有主流浏览器都以与今天相同的方式处理这个问题,对吧?
@qris:您的问题可能出在其他地方。 Simple demo, using jQuery 1.9。当然可以在我的 Chrome 中使用。
J
James Wiseman

您不需要 each 函数

$("input:radio").attr("checked", false);

或者

$("input:radio").removeAttr("checked");

这同样适用于您的文本框:

$('#frm input[type="text"]').val("");

但你可以改进这个

$('#frm input:text').val("");

.removeAttr 可能会导致问题。
关心如何扩展?或者提供链接?
是的,Kzqai,我也很好奇我的回答也被否决了。文档没有提到风险。
相关文档实际上是关于 .prop() 方法的:api.jquery.com/prop 引用“属性通常会影响 DOM 元素的动态状态,而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性、输入和按钮的 disabled 属性,或复选框的选中属性。应使用 .prop() 方法设置禁用和选中,而不是 .attr() 方法。应使用 .val() 方法获取和设置值。这意味着...
...这意味着 .attr() 将改变与 .prop() 不同的底层源,序列化的 html 属性而不是 DOM,虽然这现在可能兼容(例如,当 .attr 时,jQuery 1.9 可能会同时修改这两者() 被使用),这并不能保证将来当 .prop() 是规范的时候会对其进行修改。例如,如果您使用 .attr('checked', false);并且您使用的库包括 .prop('checked', true);,将会存在可能导致烦人的错误的内在冲突。
c
cjstehno

尝试

$(this).removeAttr('checked')

由于许多浏览器会将“checked=anything”解释为 true。这将完全删除选中的属性。

希望这可以帮助。


此外,正如其他答案之一所提到的,您不需要每个功能;您可以将 removeAttr 调用链接到选择器。
注意:此响应来自 2010 年。当时,这是一种有效且被接受的方法。从那时起,它已被弃用。
a
alkos333

基于 Igor 代码对 Laurynas 插件的轻微修改。这可以容纳与目标单选按钮相关的可能标签:

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

它取决于标签的使用方式,如果它们使用 ID,则此代码有效,如果单选按钮嵌套在标签中则无效。您可以使用这个更加增强的版本:gist.github.com/eikes/9484101
L
Laurynas

将 Igor 的代码重写为插件。

利用:

$('input[type=radio]').uncheckableRadio();

插入:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

如果我单击标签,则取消选择不起作用。因此,虽然可以通过单击标签来选择单选,但取消选择只能通过单击单选按钮本身来实现。
@alkos333 有一个似乎也适用于标签的解决方案。
它取决于标签的使用方式,如果它们使用 ID,则 @alkos333 代码有效,如果单选按钮嵌套在标签中,请使用此版本:gist.github.com/eikes/9484101
i
igor

谢谢帕特里克,你让我开心!这是你必须使用的mousedown。但是,我改进了代码,以便您可以处理一组单选按钮。

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

A
Andreas Louv

对于电台和电台组:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

P
Patrick Rietveld

试试这个,这会成功:

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });

r
rahul

尝试

$(this).attr("checked" , false );

s
sebilasse

您还可以仅使用复选框来模拟单选按钮行为:

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

然后,您可以使用这个简单的代码为您工作:

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

它工作正常,您可以更好地控制每个按钮的行为。

您可以在以下位置自行尝试:http://jsfiddle.net/almircampos/n1zvrs0c/

此分叉还可以让您按照评论中的要求取消全选:http://jsfiddle.net/5ry8n4f4/


这很好,但您不能取消选中所有框。
C
CrsCaballero

用这个

$("input[name='nameOfYourRadioButton']").attr("checked", false);

J
Jitendra Damor

只需为 jQuery 输入以下代码:

jQuery("input:radio").removeAttr("checked");

对于 javascript :

$("input:radio").removeAttr("checked");

无需放置任何 foreach 循环、.each() 函数或任何东西


k
keivan kashani

您可以使用此 JQuery 取消选中单选按钮

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

b
bummi
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

这几乎是好的,但你错过了 [0]

正确->> $(this)[0].checked = false;


或者简单地说:this.checked = false;
M
Menotti
function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

:D


W
William Isted
$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

每次双击选中的收音机时,选中的更改为 false

我的收音机以 id=radxxxxxxxx 开头,因为我使用了这个 id 选择器。


请用(可以理解的)英文写下答案。
@ericbn 如果有人不懂英语怎么办?
@AlphaMale 英语是本网站的官方语言。
@Cristik 并非所有程序员都来自“英语”国家。这是否意味着他们不能在这个论坛上发帖?其次,已经2年了。谢谢你启发我。
S
Save
function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

正确的选择器是:#frm input[type="radio"]:checked 而不是 #frm input[type="radio":checked]