จะยกเลิกการเลือกปุ่มตัวเลือกได้อย่างไร?


482

ฉันมีกลุ่มของปุ่มตัวเลือกที่ฉันต้องการยกเลิกการเลือกหลังจากส่งแบบฟอร์ม AJAX โดยใช้ jQuery ฉันมีฟังก์ชั่นต่อไปนี้:

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

ด้วยความช่วยเหลือของฟังก์ชั่นนี้ฉันสามารถล้างค่าที่กล่องข้อความ แต่ฉันไม่สามารถล้างค่าของปุ่มตัวเลือก

อย่างไรก็ตามฉันก็พยายาม$(this).val("");แต่ก็ไม่ได้ผล


3
คุณไม่จำเป็นต้องใช้แต่ละฟังก์ชั่น คุณสามารถเรียกใช้ฟังก์ชันที่คุณต้องการให้กับวัตถุ jQuery ดูคำตอบของฉันด้านล่าง
James Wiseman

1
ไม่จำเป็นสำหรับแต่ละฟังก์ชั่น () .. jQuery ("input: radio"). removeAttr ("ตรวจสอบ");
Jitendra Damor

คำตอบ:


737

อย่างใดอย่างหนึ่ง (js ธรรมดา)

this.checked = false;

หรือ (jQuery)

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

ดูหน้าช่วยเหลือ jQuery prop ()สำหรับคำอธิบายเกี่ยวกับความแตกต่างระหว่างattr ()และprop ()และเหตุใดจึงนิยมใช้ prop ()
prop () เปิดตัวพร้อม jQuery 1.6 ในเดือนพฤษภาคม 2554


29
PPL โปรดทราบว่าพฤติกรรมของเขาเปลี่ยนไปเมื่อวันที่ 1.6 ซึ่งเป็นที่นิยมprop()ในขณะที่.attr()จะถูก จำกัด เฉพาะคุณลักษณะที่แท้จริง
Fabiano Soriani

ดังนั้นวิธีที่ดีที่สุดคือการใช้ JS ธรรมดาที่นี่?
Doug Molineux

14
@Pete: ฉันจะบอกว่าถ้าคุณมีระบบที่สร้างขึ้นบน jQuery ข้อได้เปรียบเพิ่มเติมที่ให้คุณคือถ้ามีเบราว์เซอร์ที่จัดการสิ่งนี้แตกต่างกันไปคุณจะสามารถมอบการสนับสนุนเบราว์เซอร์ให้กับห้องสมุด อย่างไรก็ตามหากซอฟต์แวร์ของคุณไม่ได้ใช้งาน jQuery ในปัจจุบันจะไม่คุ้มค่าที่จะรวมไลบรารีสำหรับสิ่งนี้
David Hedlund

@David Hedlund: ฉันคิดว่าคุณหมายถึงว่าเบราว์เซอร์หลักทั้งหมดจัดการในลักษณะเดียวกันกับวันนี้ใช่ไหม?
Shawn

2
@qris: ปัญหาของคุณน่าจะอยู่ที่อื่น สาธิตง่ายใช้ jQuery 1.9 ทำงานได้ดีใน Chrome ของฉัน
David Hedlund

88

คุณไม่ต้องการeachฟังก์ชั่น

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

หรือ

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

ควรใช้กับกล่องข้อความของคุณด้วย:

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

แต่คุณสามารถปรับปรุงได้

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

2
.removeAttr อาจทำให้เกิดปัญหา
Kzqai

สนใจที่จะขยายตัวอย่างไร? หรือให้ลิงค์?
James Wiseman

ใช่ Kzqai ฉันยังสงสัยว่าคำตอบของฉันถูกลงคะแนนสำหรับเรื่องนี้เช่นกัน เอกสารดังกล่าวไม่มีความเสี่ยง
cjstehno

1
เอกสารที่เกี่ยวข้องเป็นจริงใน. prop () วิธีการ: api.jquery.com/prop อ้าง "คุณสมบัติโดยทั่วไปส่งผลกระทบต่อสถานะแบบไดนามิกขององค์ประกอบ DOM โดยไม่ต้องเปลี่ยนแอตทริบิวต์ HTML ต่อเนื่องตัวอย่างเช่นคุณสมบัติค่าขององค์ประกอบอินพุตคุณสมบัติปิดการใช้งาน ของอินพุตและปุ่มหรือคุณสมบัติที่ถูกตรวจสอบของช่องทำเครื่องหมายเมธอด. prop () ควรถูกใช้เพื่อตั้งค่าปิดใช้งานและตรวจสอบแทนเมธอด. atr () เมธอด .val () ควรใช้เพื่อรับและตั้งค่า ." ซึ่งหมายความว่า ...
Kzqai

1
... ซึ่งหมายความว่า. atr () จะทำการเปลี่ยนแปลงแหล่งข้อมูลพื้นฐานที่แตกต่างจาก. prop (), แอตทริบิวต์ html ที่ทำให้เป็นอนุกรมแทน DOM และในขณะนี้อาจเข้ากันได้ในขณะนี้ (เช่น jQuery 1.9 อาจแก้ไขทั้งสองเมื่อเมื่อ. atr () ใช้) ซึ่งไม่รับประกันว่าจะถูกปรับปรุงให้แก้ไขทั้งในอนาคตเมื่อ. prop () เป็นที่ยอมรับ ตัวอย่างเช่นหากคุณใช้ .attr ('ทำเครื่องหมาย' เป็นเท็จ); และห้องสมุดที่คุณใช้นั้นรวมถึง .prop ('ถูกเลือก', จริง); จะมีข้อขัดแย้งโดยธรรมชาติที่อาจทำให้เกิดข้อบกพร่องที่น่ารำคาญ
Kzqai

29

ลอง

$(this).removeAttr('checked')

เนื่องจากเบราว์เซอร์จำนวนมากจะตีความ 'checked = Anything' ว่าเป็นจริง นี่จะเป็นการลบแอททริบิวที่เลือกไว้ทั้งหมด

หวังว่านี่จะช่วยได้


นอกจากนี้ในฐานะที่เป็นหนึ่งในคำตอบอื่น ๆ ที่กล่าวถึงคุณไม่จำเป็นต้องใช้แต่ละฟังก์ชัน คุณสามารถโยงการเรียก removeAttr ไปยังตัวเลือก
cjstehno

6
หมายเหตุ: การตอบสนองนี้มาจาก 2010 ในเวลานั้นนี่เป็นวิธีการที่ถูกต้องและเป็นที่ยอมรับ ตั้งแต่นั้นมาก็เลิกใช้แล้ว
cjstehno

21

การปรับเปลี่ยนเล็กน้อยของปลั๊กอินของ Laurynas ตามรหัสของ Igor สิ่งนี้รองรับฉลากที่เป็นไปได้ที่เกี่ยวข้องกับปุ่มตัวเลือกที่ถูกกำหนดเป้าหมาย:

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

1
ขึ้นอยู่กับวิธีการใช้ป้ายกำกับหากใช้รหัสดังนั้นรหัสนี้จะใช้งานได้หากปุ่มตัวเลือกซ้อนอยู่ในป้ายกำกับจะไม่ทำงาน คุณสามารถใช้รุ่นที่ปรับปรุงเพิ่มเติมนี้ได้: gist.github.com/eikes/9484101
eikes

20

ขอบคุณ Patrick คุณทำวันของฉัน! มันเป็น 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;
    }
}})());

17

เขียนโค้ดของอิกอร์เป็นปลั๊กอิน

ใช้:

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

การยกเลิกการเลือกไม่ทำงานหากฉันคลิกที่ป้ายกำกับ ดังนั้นในขณะที่เป็นไปได้ที่จะเลือกวิทยุโดยคลิกที่ป้ายกำกับการยกเลิกการเลือกจะใช้งานได้โดยคลิกที่ปุ่มตัวเลือกเท่านั้น
Simon Hürlimann

@ alkos333 มีโซลูชันที่ดูเหมือนว่าจะทำงานกับป้ายกำกับด้วยเช่นกัน
Simon Hürlimann

ขึ้นอยู่กับวิธีการใช้ป้ายกำกับหากใช้ ID ดังนั้นรหัส @ alkos333 จะทำงานอย่างไรหากปุ่มตัวเลือกซ้อนอยู่ในป้ายกำกับให้ใช้รุ่นนี้: gist.github.com/eikes/9484101
eikes

16

สำหรับวิทยุและกลุ่มวิทยุ:

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

14

ลองสิ่งนี้จะทำเคล็ดลับ:

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


9

นอกจากนี้คุณยังสามารถจำลองพฤติกรรม RadioButton โดยใช้ช่องทำเครื่องหมายเท่านั้น:

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


นี่ยอดเยี่ยมยกเว้นคุณไม่สามารถยกเลิกการเลือกช่องทั้งหมด
สเตฟาน

6

เพียงใส่รหัสต่อไปนี้สำหรับ jQuery:

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

และสำหรับจาวาสคริปต์:

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

ไม่จำเป็นต้องใส่ลูป foreach ใด ๆ , .each () fubction หรือสิ่งใด ๆ



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

เกือบจะดี แต่คุณพลาด [0]

ถูกต้อง - >> $(this)[0].checked = false;


1
หรือเพียงแค่:this.checked = false;
eikes

4

คุณสามารถใช้ JQuery นี้เพื่อยกเลิกการเลือก radiobutton

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

1
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


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

ทุกครั้งที่คุณคลิกสองครั้งในวิทยุที่มีการตรวจสอบการเปลี่ยนแปลงที่ทำเครื่องหมายเป็นเท็จ

วิทยุของฉันเริ่มต้นด้วยid=radxxxxxxxxเพราะฉันใช้ตัวเลือกรหัสนี้


3
กรุณาเขียนคำตอบเป็นภาษาอังกฤษ (เข้าใจ)
ericbn

@ericbn จะเกิดอะไรขึ้นถ้ามีคนไม่รู้ภาษาอังกฤษ
AlphaMale

@AlphaMale english เป็นภาษาทางการของเว็บไซต์นี้
Cristik

@Cristik โปรแกรมเมอร์บางคนไม่ได้มาจากประเทศที่พูดภาษาอังกฤษ หมายความว่าพวกเขาไม่สามารถโพสต์ในฟอรัมนี้ ประการที่สองมันมา 2 ปีเพื่อน ขอบคุณที่ให้ความกระจ่างแก่ฉัน
AlphaMale

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.