JQuery के साथ एक रेडियो बटन कैसे जांचें?


889

मैं jQuery के साथ एक रेडियो बटन की जांच करने की कोशिश करता हूं। यहाँ मेरा कोड है:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

और जावास्क्रिप्ट:

jQuery("#radio_1").attr('checked', true);

काम नहीं करता है:

jQuery("input[value='1']").attr('checked', true);

काम नहीं करता है:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

काम नहीं करता है:

क्या आपके पास एक और विचार है? मैं क्या खो रहा हूँ?


1
आपकी प्रतिक्रियाओं के लिए धन्यवाद! मुझे समस्या मिल गई। दरअसल, इसे करने के दो पहले तरीके काम कर रहे हैं। बिंदु यह है कि मैं jqueryUI का उपयोग इस कोड के साथ 3 रेडियो बटन के एक सेट को बटन में बदलने के लिए करता हूं: jQuery ("# ​​प्रकार")। बटनसेट (); लेकिन रेडियो की जाँच करने से पहले यह परिवर्तन करना रेडियो सेट को तोड़ रहा था (पता नहीं क्यों)। अंत में, मैंने रेडियो की जाँच के बाद बटनसेट कॉल डाला और यह त्रुटिहीन रूप से काम करता है।
एलेक्सिस

$ का उपयोग करें ("इनपुट: रेडियो [मूल्य = '2']")। प्रोप ('जाँच', सत्य); यहाँ लिंक freakyjolly.com/-
कोड जासूस

जवाबों:


1469

बराबर या ऊपर jQuery के संस्करणों के लिए (> =) 1.6, का उपयोग करें:

$("#radio_1").prop("checked", true);

संस्करणों से पहले (<) 1.6 के लिए, उपयोग करें:

$("#radio_1").attr('checked', 'checked');

युक्ति: आप बाद में रेडियो बटन पर click()या कॉल करना चाहते हैं change()अधिक जानकारी के लिए टिप्पणियाँ देखें।


80
JQuery 1.9 या उच्चतर में यह समाधान काम नहीं करेगा। $ ("# रेडियो_1") का प्रयोग करें। प्रोप ("चेक किया गया", सच); बजाय।
स्थापित करें

12
@Installero वास्तव में, prep1.6 के बाद से सही है, और 1.9 के बाद से आवश्यक है।
जॉन ड्वोरक

42
यह .change()पृष्ठ पर किसी भी अन्य घटनाओं को ट्रिगर करने के लिए अंत में जोड़ने में मदद करता है।
फॉक्सिननी

13
इस उत्तर को फिर से व्यवस्थित करने के लिए समझदारी हो सकती है ताकि .propस्पष्ट रूप से सही उत्तर हो और .attrविधि jQuery <1.6 के लिए एक नोट है।
पैट्रिक

22
यदि आप चाहते हैं कि रेडियो समूह के अन्य रेडियो बटन ठीक से उपयोग करने के लिए अपडेट हों$("#radio_1").prop("checked", true).trigger("click");
पॉल लेब्यू

256

इसे इस्तेमाल करे।

इस उदाहरण में, मैं इसके इनपुट नाम और मूल्य के साथ इसे लक्षित कर रहा हूं

$("input[name=background][value='some value']").prop("checked",true);

जानने के लिए अच्छा है: बहु-शब्द मूल्य के मामले में, यह एपोस्ट्रोफ के कारण भी काम करेगा।


5
यह शायद सबसे अच्छा तरीका है, दूसरों को वहाँ छड़ी करने की प्रवृत्ति है, जिससे फ़ंक्शन दूसरी बार बेकार हो जाता है, जबकि यह उम्मीद के मुताबिक काम करता है
रॉय टोलेडो

पता चला कि चूंकि केवल एक ही है जिसे चुना जा सकता है, $ ('इनपुट [नाम = "टाइप"]: चेक किया गया))। वैल () अच्छा है।
१५

कृपया विस्तार से बताएं। सामान्य विचार यह है कि रेडियो बटन को उसकी विशेषताओं - नाम और वैकल्पिक रूप से, मान के साथ संबोधित किया जाए। मुझे यकीन नहीं है कि आप इसे पूरा करने की कोशिश कर रहे हैं, क्योंकि केवल नाम की विशेषता है और: चेक किए गए छद्म चयनकर्ता का उपयोग किया जाता है। और आप वेल को पुनः प्राप्त कर रहे हैं, जो कि भ्रामक है। धन्यवाद
व्लादिमीर जुरिसिस

2
मैं अपने सभी रेडियोों में एक "आईडी" जोड़ने वाला था, लेकिन इस पद्धति ने त्रुटिपूर्ण रूप से काम किया। लेकिन ध्यान रखें कि जब आपका मूल्य बहु-शब्द है ("रंग बैंगनी" कहें), तो आपको उपयुक्त उद्धरण शामिल करने होंगे: $("input[name=background][value='color purple']").prop("checked",true);
ट्रिस्टन ताओ

3
चयनित उत्तर से बहुत बेहतर! ठीक वही जो मेरे द्वारा खोजा जा रहा था। यह सामान्य है, जबकि चयनित उत्तर विशिष्ट है। बहुत अच्छे धन्यवाद।
गारबेजगो

96

JQuery 1.6 में एक और फंक्शन प्रोप () जोड़ा गया है, जो एक ही उद्देश्य को पूरा करता है।

$("#radio_1").prop("checked", true); 

13
attr('checked', true)jQuery 1.9 के साथ मेरे लिए काम करना बंद कर दिया, यह समाधान है!
पास्कल

1
ऐसा लगता है कि prop("checked", true)काम कर रहा है, attr('checked', 'checked')नहीं
टॉमस Kuter

@TomaszKuter मुझे प्रोप () का उपयोग करने की सलाह देते हैं क्योंकि DOM प्रॉपर्टी चेक की गई वह है जो व्यवहार को प्रभावित करे - लेकिन इसकी अजीब - इस फिडल में ( jsfiddle.net/KRXeV ) attr('checked', 'checked')वास्तव में x काम करती है)
jave.web

यहाँ एक अच्छा
संवितरण

81

विकल्प पढ़ने के लिए छोटा और आसान:

$("#radio_1").is(":checked")

यह सही या गलत है, इसलिए आप इसे "यदि" कथन में उपयोग कर सकते हैं।


5
धन्यवाद! यह वही है जो मैं खोज रहा था, लेकिन (FYI) ओपी पूछ रहा था कि रेडियो बटन को कैसे सेट किया जाए, इसका मूल्य नहीं मिलता है। (शब्द "जाँच" ने सवाल को भ्रामक बना दिया।)
बैम्पफर

31

इसे इस्तेमाल करे।

मान का उपयोग करके रेडियो बटन की जांच करने के लिए इसका उपयोग करें।

$('input[name=type][value=2]').attr('checked', true); 

या

$('input[name=type][value=2]').attr('checked', 'checked');

या

$('input[name=type][value=2]').prop('checked', 'checked');

आईडी का उपयोग करके रेडियो बटन की जांच करने के लिए इसका उपयोग करें।

$('#radio_1').attr('checked','checked');

या

$('#radio_1').prop('checked','checked');


13

$.propजिस तरह से बेहतर है:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

और आप इसे निम्नलिखित की तरह परख सकते हैं:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

9

आप को करना पड़ेगा

jQuery("#radio_1").attr('checked', 'checked');

वह HTML विशेषता है


7

यदि संपत्ति nameकाम नहीं करती है तो यह मत भूलो कि idअभी भी मौजूद है। यह उत्तर उन लोगों के लिए है, जो idयहाँ पर लक्षित करना चाहते हैं कि आप कैसे करते हैं।

$('input[id=element_id][value=element_value]').prop("checked",true);

क्योंकि संपत्ति nameमेरे काम नहीं आती। सुनिश्चित करें कि आप घेर नहीं रहे हैं idऔर nameदोहरे / एकल उद्धरणों के साथ।

चीयर्स!



6

इसे इस्तेमाल करे

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});

6

हैरानी की बात है, टिप्पणियों के बावजूद सबसे लोकप्रिय और स्वीकृत जवाब उपेक्षा की घटना को ट्रिगर करता है। सुनिश्चित करें कि आप आह्वान करते हैं .change() , अन्यथा सभी "परिवर्तन पर" बाइंडिंग इस घटना को अनदेखा कर देंगे।

$("#radio_1").prop("checked", true).change();

5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

5

मूल्य प्राप्त करें:

$("[name='type'][checked]").attr("value");

मूल्य ते करना:

$(this).attr({"checked":true}).prop({"checked":true});

रेडियो बटन पर क्लिक करें जोड़ attr जाँच:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});

5

हमें यह बताना चाहिए कि यह एक radioबटन है। कृपया निम्नलिखित कोड के साथ प्रयास करें।

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);

5

बस अगर कोई jQuery UI का उपयोग करते हुए इसे प्राप्त करने की कोशिश कर रहा है, तो आपको अपडेट किए गए डेटा को प्रतिबिंबित करने के लिए UI चेकबॉक्स ऑब्जेक्ट को रिफ्रेश करने की भी आवश्यकता होगी:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set

4

मैं इस कोड का उपयोग करता हूं:

मुझे अंग्रेजी के लिए खेद है।

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>


4

उदाहरण के साथ यह कोशिश करो

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>


3
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});

2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');

2
$("#radio_1").attr('checked', true);यह काम नहीं करेगा। जैसा कि ओपी ने कहा है
जॉन्स

2
कृपया अपने उत्तरों में कोड की व्याख्या करें, और प्रश्न पढ़ें (यह कोशिश की गई है)
SomeKittens

2

मुझे कुछ संबंधित उदाहरण दिए गए हैं कि कैसे मैं एक नई शर्त जोड़ना चाहता हूं, इसके बारे में कहता हूं, अगर मैं चाहता हूं कि पावर्स और पाविंग स्लैब को छोड़कर प्रोजेक्ट स्टेटस वैल्यू पर क्लिक करने के बाद मैं कलर स्कीम छिपाऊं।

उदाहरण यहाँ है:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/


2

इसके अलावा, आप जाँच सकते हैं कि तत्व की जाँच की गई है या नहीं:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

आप अनियंत्रित तत्व के लिए जाँच कर सकते हैं:

$('.myCheckbox').attr('checked',true) //Standards way

आप इस तरह से अनचेक भी कर सकते हैं:

$('.myCheckbox').removeAttr('checked')

आप रेडियो बटन की जांच कर सकते हैं:

बराबर या ऊपर jQuery के संस्करणों के लिए (> =) 1.6, का उपयोग करें:

$("#radio_1").prop("checked", true);

संस्करणों से पहले (<) 1.6 के लिए, उपयोग करें:

$("#radio_1").attr('checked', 'checked');

2

मैंने jquery-1.11.3.js का उपयोग किया

मूल सक्षम और अक्षम करें

युक्तियाँ 1: (रेडियो बटन सामान्य अक्षम करें और सक्षम करें)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

युक्तियाँ 2: (आईडी चयनकर्ता प्रोप का उपयोग कर) (या attr ())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

टिप्स 3: (क्लास चयनकर्ता प्रोप () या एरेक्ट का उपयोग करके) ()

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

अन्य टिप्स

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>

2

प्रोप () mehtod का प्रयोग करें

यहां छवि विवरण दर्ज करें

स्रोत लिंक

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>


<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

1

इसे इस्तेमाल करे

 $("input:checked", "#radioButton").val()

अगर चेक रिटर्न True नहीं तो चेक रिटर्नFalse

jQuery v1.10.1

1

कुछ बार उपरोक्त समाधान काम नहीं करते हैं, तो आप नीचे कोशिश कर सकते हैं:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

दूसरा तरीका जो आप आजमा सकते हैं:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);

1
यूनिफ़ॉर्म एक jQuery प्लगइन है जो प्रपत्रों को पूर्ववर्ती बनाता है, लेकिन यह अतिरिक्त तत्वों को जोड़कर करता है। जब भी मैं चेक किए गए मान को अपडेट करता हूं, तो अतिरिक्त तत्व स्थिति को अपडेट नहीं किया जाता है, जिससे अदृश्य इनपुट की जांच की जा सकती है, लेकिन एक दृश्यमान पृष्ठभूमि तत्व के साथ जो चेक किया हुआ दिखता है। jQuery.uniform.update()समाधान है!
डेनिलसन सा मैया

1

इसे इस्तेमाल करे:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});

यह checkboxradioप्लगइन के लिए फ़ाइल को शामिल किए बिना काम नहीं करेगा , जो तब व्यर्थ है जब आप इसे पूरा करने के लिए कार्यों में jQuery के बिल्ट का उपयोग कर सकते हैं (स्वीकृत उत्तर देखें)।
नाथन

1

मैं सिर्फ एक समान समस्या है, एक सरल समाधान सिर्फ उपयोग करने के लिए है:

.click()

यदि आप फ़ंक्शन को कॉल करने के बाद रेडियो रिफ्रेश करते हैं तो कोई अन्य समाधान काम करेगा।


1
कॉल क्लिक कभी कभी
ie9

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.