কীভাবে একটি রেডিও বোতামটি আনচেক করবেন?


482

আমার কাছে এমন রেডিও বোতামগুলির একটি গ্রুপ রয়েছে যা আমি এজেএক্স ফর্ম 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 অবজেক্টের উপরে কল করতে পারেন। নীচে আমার উত্তর দেখুন
জেমস ওয়াইজম্যান

1
প্রতিটি () ফাংশনের প্রয়োজন নেই .. jQuery ("ইনপুট: রেডিও") remove
জিতেন্দ্র দামোর

উত্তর:


737

হয় (সরল জেএস)

this.checked = false;

বা (jQuery)

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

অ্যাট্রি () এবং প্রপ () এর মধ্যে পার্থক্য এবং কেন প্রোপ () এখন পছন্দনীয় তার ব্যাখ্যা জন্য jQuery প্রোপ () সহায়তা পৃষ্ঠা দেখুন । প্রপ () jQuery 1.6 এর সাথে মে 2011 সালে প্রবর্তিত হয়েছিল।


29
পিপিএল, সচেতন থাকুন যে তার আচরণটি 1.6 এর পক্ষে পরিবর্তিত হচ্ছে prop(), তবে .attr()প্রকৃত বৈশিষ্ট্যগুলিতেই সীমাবদ্ধ থাকবে
ফ্যাবিয়ানো সোরিয়ানী

সুতরাং এখানে সরল জেএস ব্যবহার করা ভাল?
ডগ মোলিনাক্স

14
@ পিট: আমি বলব যে আপনি যদি jQuery এর উপর ভিত্তি করে একটি সিস্টেম তৈরি করে থাকেন, তবে অতিরিক্ত সুবিধা যা আপনাকে দেয় তা হ'ল যদি কোনও ব্রাউজার যদি এটিকে অন্যভাবে পরিচালনা করে তবে আপনি ব্রাউজারটিকে লাইব্রেরিতে সমর্থন সরবরাহ করতে সক্ষম হবেন। যাইহোক, যদি আপনার সফ্টওয়্যারটি বর্তমানে jQuery ব্যবহার না করে তবে কেবল এটির জন্য লাইব্রেরিটি অন্তর্ভুক্ত করা ওভারহেডের পক্ষে উপযুক্ত হবে না।
ডেভিড হেডলুন্ড

@ ডেভিড হেডলুন্ড: আমি মনে করি আপনি বোঝাচ্ছেন যে সমস্ত বড় ব্রাউজারগুলি আজকের মতো একইভাবে পরিচালনা করে, তাই না?
শান

2
@ কিরিস: আপনার সমস্যা সম্ভবত অন্য কোথাও রয়েছে। সহজ ডেমো, jQuery 1.9 ব্যবহার করে । অবশ্যই আমার ক্রোমে কাজ করে।
ডেভিড হেডলুন্ড

88

আপনি eachফাংশন প্রয়োজন হবে না

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

অথবা

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

আপনার পাঠ্যবক্সেও এটি প্রয়োগ করা উচিত:

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

তবে আপনি এই উন্নতি করতে পারে

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

2
.removeAttr সমস্যার কারণ হতে পারে।
Kzqai

কিভাবে প্রসারিত যত্ন? বা একটি লিঙ্ক সরবরাহ?
জেমস উইজম্যান

হ্যাঁ, জাজকাই, আমিও আগ্রহী যে আমার উত্তরটিও এর পক্ষে ডাউন-ভোট হয়েছিল। ডকুমেন্টেশনে কোনও ঝুঁকি উল্লেখ করা হয়েছে।
সিজেস্টেহনো

1
প্রাসঙ্গিক ডকুমেন্টেশন আসলে .prop () পদ্ধতিতে থাকে: api.jquery.com/prop উক্তি "বৈশিষ্ট্যগুলি সাধারণত সিরিয়ালযুক্ত এইচটিএমএল বৈশিষ্ট্য পরিবর্তন না করেই কোনও ডোম উপাদানটির গতিশীল অবস্থাকে প্রভাবিত করে। উদাহরণগুলি ইনপুট উপাদানগুলির অক্ষম সম্পত্তি, অক্ষম সম্পত্তি অন্তর্ভুক্ত করে ইনপুট এবং বোতামগুলির বা একটি চেকবক্সের সম্পত্তি হিসাবে চিহ্নিত .prop () পদ্ধতিটি .attr () পদ্ধতির পরিবর্তে অক্ষম এবং চেক করতে সেট করা উচিত। .val () পদ্ধতিটি মান পেতে এবং নির্ধারণের জন্য ব্যবহার করা উচিত । " এর অর্থ
হ'ল

1
... এর অর্থ হ'ল .attr () ডোম এর পরিবর্তে সিরিয়ালযুক্ত এইচটিএমএল বৈশিষ্ট্য .prop () এর চেয়ে আলাদা অন্তর্নিহিত উত্সকে পরিবর্তিত করবে এবং যখন এটি এখন সামঞ্জস্যপূর্ণ হতে পারে (যেমন jQuery 1.9 উভয়ই পরিবর্তন করতে পারে যখন .attr () ব্যবহৃত হয়), এটি কোনও গ্যারান্টি নয় যে ভবিষ্যতে যখন .prop () বিচক্ষণ হয় তখন উভয়কেই সংশোধন করা উচিত। উদাহরণস্বরূপ, যদি আপনি .attr ('চেকড', মিথ্যা) ব্যবহার করেন; এবং আপনি যে লাইব্রেরিটি ব্যবহার করেন তার মধ্যে রয়েছে .প্রপ ('চেক করা', সত্য); এটি এমন অন্তর্নিহিত বিরোধ হতে চলেছে যা বিরক্তিকর বাগগুলি তৈরি করতে পারে।
Kzqai

29

চেষ্টা

$(this).removeAttr('checked')

যেহেতু প্রচুর ব্রাউজারগুলি 'চেকড = কোনও কিছু'কে সত্য হিসাবে ব্যাখ্যা করবে। এটি পুরোপুরি চেক করা বৈশিষ্ট্যটি সরিয়ে ফেলবে।

আশাকরি এটা সাহায্য করবে.


এছাড়াও, অন্য উত্তরগুলির মধ্যে একটির যেমন উল্লেখ করা হয়েছে, আপনার প্রতিটি ফাংশনটি প্রয়োজন হবে না; আপনি কেবল নির্বাচককে অপসারণ কল কলটি চেইন করতে পারেন।
সিজেস্তেহ্নো

6
দ্রষ্টব্য: এই প্রতিক্রিয়াটি ২০১০ সালের that সময়ে, এটি ছিল একটি বৈধ এবং স্বীকৃত পদ্ধতি। তার পর থেকে এটি অবমূল্যায়িত হয়েছে।
সিজেস্তেহ্নো

21

ইগোরের কোডের ভিত্তিতে লরিয়ানাসের প্লাগইনটিতে সামান্য পরিবর্তন। এটি লক্ষ্যবস্তু হওয়া রেডিও বোতামগুলির সাথে যুক্ত সম্ভাব্য লেবেলগুলিকে সমন্বিত করে:

(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/eike/9484101
ekes

20

ধন্যবাদ প্যাট্রিক, আপনি আমার দিন তৈরি করেছেন! এটি মাউসডাউন আপনার ব্যবহার করতে হবে। তবে আমি কোডটি উন্নত করেছি যাতে আপনি একটি গ্রুপের রেডিও বোতাম পরিচালনা করতে পারেন।

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

আমি লেবেলে ক্লিক করলে আনসलेक्टিং কাজ করে না। সুতরাং লেবেলে ক্লিক করে একটি রেডিও নির্বাচন করা সম্ভব হলেও, অনির্বাচন করা কেবল রেডিও বোতামে ক্লিক করেই কাজ করে।
সাইমন হারলিমন

@ alkos333 এর একটি সমাধান রয়েছে যা লেবেলগুলির সাথেও কাজ করে বলে মনে হচ্ছে।
সাইমন হারলিমন

এটি লেবেলগুলি কীভাবে ব্যবহৃত হয় তার উপর নির্ভর করে, যদি তারা আইডি ব্যবহার করে তবে @ অ্যালকোস 333 কোড কাজ করে, যদি রেবেল বোতামটি লেবেলে বাসা বেঁধে থাকে তবে
ekes

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

আপনি কেবলমাত্র চেকবক্সগুলি ব্যবহার করে রেডিওবটন আচরণ অনুকরণ করতে পারেন:

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

কোনও ফোরচ লুপ, .Ech () ফিউশন বা কোনও জিনিস রাখার দরকার নেই



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

এটি প্রায় ভাল তবে আপনি মিস করেছেন [0]

সঠিক - >> $(this)[0].checked = false;


1
বা সহজভাবে:this.checked = false;
ekes

4

আপনি এই জিকুয়েরিটি আনচেক রেডিওবোটনের জন্য ব্যবহার করতে পারেন

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

: ডি


-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
উত্তরটি (বোধগম্য) ইংরেজিতে লিখুন।
এরিকন

@ ইরিকবিএন যদি কেউ ইংরেজি না জানেন?
আলফামালে

@ আলফামেলে ইংরেজি এই সাইটে অফিসিয়াল ভাষা।
ক্রিশটিক

@ ক্রিশটিক সমস্ত প্রোগ্রামার "ইংরাজী" ভাষী দেশ থেকে আসে না। তার মানে কি তারা এই ফোরামে পোস্ট করতে পারবেন না? দ্বিতীয়ত, এটি 2 বছরের সাথী হয়েছে। আমাকে আলোকিত করার জন্য ধন্যবাদ
আলফামেলে

-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 না not#frm input[type="radio":checked]

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.