jQuery के साथ ऑनलोड चेक किए गए रेडियो विकल्प को कैसे सेट करें


297

JQuery के साथ रेडियो ऑप्शन चेक किए गए ऑनलोड को कैसे सेट करें?

यदि कोई डिफ़ॉल्ट सेट नहीं है और फिर डिफ़ॉल्ट सेट किया गया है, तो जांचने की आवश्यकता है


1
@ आर्येनस अन्य प्रश्न मेरा एक डुप्लिकेट नहीं होगा क्योंकि मैंने दूसरे प्रश्न से पहले मेरा पूछा था?
फिल पाफर्ड

जवाबों:


558

उदाहरण के लिए, जैसे आपके पास रेडियो बटन हैं:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

और आप "नर" ऑनलोड के मान के साथ एक की जांच करना चाहते थे यदि कोई रेडियो नहीं है:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});

सिर्फ पाओलो, IIRC को आश्चर्यचकित करते हुए कल्पना कहती है कि जाँच की गई विशेषता का मतलब जाँचना = "जाँचना" है (हालाँकि मैं गलत हो सकता हूँ)। क्या jQuery इस उदाहरण में 'जाँच' के लिए सही है? बस जिज्ञासु ...
एलेक्स

8
मेरे मूल उदाहरण में 'जाँच', 'जाँच' थी, यह उन चीजों में से एक है जिन्हें मैं कभी याद नहीं रख सकता कि कौन सी सही है। jQuery के आंकड़े इसे या तो तरीके से बताते हैं, लेकिन मुझे पता है कि यदि आप एक DOM तत्व की वास्तविक जांची गई विशेषता को सेट करना चाहते हैं तो यह एक बूलियन माना जाता है, जैसे, document.getElementById ('x')। check = true; - तो मैं उस के साथ चला गया।
पाओलो बरगीनो

बस इस वर्ग ब्रैकेट संकेतन को जोड़ना चाहते हैं [नाम = लिंग] विंडोज़ फोन के स्टॉक ब्राउज़र में काम नहीं करता है 7.
28

मैंने इसे FF और jQuery 1.9.1 और .attr ('चेक किया हुआ', सही) के साथ आज़माया; हालांकि, काम नहीं करता है। शुद्ध ('चेक किया हुआ', सत्य); कर देता है। पर नज़र stackoverflow.com/questions/4618733/... (? डुप्लिकेट)
संस्थान

एक त्वरित एक: $radios.removeAttr('checked')प्रोप से पहले इस्तेमाल नहीं करते । यह ब्राउज़र और पोस्ट किए गए मूल्यों को भ्रमित करेगा।
igasparetto

109

कैसे एक लाइनर के बारे में?

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);

उपरोक्त बेहतर है क्योंकि यह अधिक जटिल नाम मूल्यों का समर्थन करता है।
जे। मार्टिन

13
यह ऑप्स प्रश्न का पूरी तरह से उत्तर नहीं देता है - यह जांचने की आवश्यकता है कि क्या डिफ़ॉल्ट विकल्प पहले से पहले चेक किया गया है। इस तरह की चीज़ के लिए भी आपको अब attr () के बजाय प्रोप () का उपयोग करना चाहिए। स्पष्टीकरण के लिए, यहां "गुण बनाम गुण" अनुभाग देखें: api.jquery.com/prop । इसके अलावा अतिरिक्त फिल्टर की कोई आवश्यकता नहीं है, आप बस 2 चयनकर्ताओं को जोड़ सकते हैं जैसे $ ("इनपुट [नाम = लिंग] [मूल्य = पुरुष]")। प्रोप ("चेक किया गया", सच);
जैकोक्रॉन

3
यह समाधान पहली बार काम करता है जब मैं रेडियो सेट करता हूं लेकिन बाद में विफल हो जाता है। "Attr" के बजाय "प्रोप" का उपयोग करके, यह पूरी तरह से काम करता है। तो: $ ('इनपुट: रेडियो [नाम = "लिंग"]')। फ़िल्टर ('[मूल्य = "पुरुष"])। प्रोप (' जाँच ', सत्य);
एंड्रयू

2
सही - प्रोप () अब संपत्तियों तक पहुंचने के लिए अनुशंसित विधि है।
एंड्रयू मैककॉम 28

1
सरल: $ ('इनपुट: रेडियो [नाम = "लिंग"] [मूल्य = "पुरुष"]')। attr ('जाँच', सत्य);
रेगिस

52

यह एक कारण बन जाएगा। फ़सेट () विफलता:

$('input:radio[name=gender][value=Male]').attr('checked', true);

लेकिन यह एक काम करता है:

$('input:radio[name=gender][value=Male]').click();

5
मैं आपको ट्रिगर का उपयोग करने की सलाह दूंगा ('क्लिक') थोड़ा अधिक पठनीय और एक विधि कॉल को रोकता है।
बारकर्मन 01

35

JQuery के पास वास्तव में रेडियो और चेकबॉक्स के लिए चेक स्टेटस सेट करने के दो तरीके हैं और यह इस बात पर निर्भर करता है कि आप HTML मार्किट में मान विशेषता का उपयोग कर रहे हैं या नहीं:

यदि उनके पास मूल्य विशेषता है:

$("[name=myRadio]").val(["myValue"]);

यदि उनके पास मूल्य विशेषता नहीं है:

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

अधिक जानकारी

पहले मामले में, हम पूरे रेडियो समूह को नाम का उपयोग करते हुए निर्दिष्ट करते हैं और JQuery से कहते हैं कि वे वेल फंक्शन का उपयोग करके रेडियो का चयन करें। वैल फ़ंक्शन 1-तत्व सरणी लेता है और मिलान मूल्य के साथ रेडियो पाता है, इसकी जाँच = सही सेट करें। समान नाम वाले अन्य लोगों का चयन रद्द कर दिया जाएगा। यदि मिलान मूल्य वाला कोई रेडियो नहीं मिला तो सभी का चयन रद्द कर दिया जाएगा। अगर एक ही नाम और मूल्य के साथ कई रेडियो हैं, तो अंतिम का चयन किया जाएगा और अन्य का चयन रद्द कर दिया जाएगा।

यदि आप रेडियो के लिए मूल्य विशेषता का उपयोग नहीं कर रहे हैं, तो आपको समूह में विशेष रेडियो का चयन करने के लिए अद्वितीय आईडी का उपयोग करने की आवश्यकता है। इस मामले में, आपको "चेक" संपत्ति सेट करने के लिए प्रोप फ़ंक्शन का उपयोग करने की आवश्यकता है। बहुत से लोग चेकबॉक्स के साथ मान विशेषता का उपयोग नहीं करते हैं, इसलिए # 2 चेकबॉक्स के लिए अधिक लागू होता है। यह भी ध्यान दें कि चेकबॉक्स के रूप में समूह नहीं बनाते हैं जब उनका समान नाम होता है, तो आप $("[name=myCheckBox").prop("checked", true);चेकबॉक्स के लिए कर सकते हैं ।

आप इस कोड के साथ यहां खेल सकते हैं: http://jsbin.com/OSULAtu/1/edit?html,output


22

मुझे @Amc का जवाब पसंद आया। मैंने पाया कि फ़िल्टर () कॉल का उपयोग नहीं करने के लिए अभिव्यक्ति को और अधिक संघनित किया जा सकता है (@chaiko ने स्पष्ट रूप से इस पर भी गौर किया)। इसके अलावा, प्रोप () jQuery v1.6 + के लिए vs attr () जाने का तरीका है , विषय पर आधिकारिक सर्वोत्तम प्रथाओं के लिए प्रोप () के लिए jQuery प्रलेखन देखें ।

@Paolo Bergantino के उत्तर से समान इनपुट टैग पर विचार करें।

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

अपडेटेड वन-लाइनर कुछ इस तरह पढ़ सकता है:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);

15

मुझे लगता है कि आप मान सकते हैं, यह नाम अद्वितीय है और समूह के सभी रेडियो का एक ही नाम है। तो आप इस तरह jQuery समर्थन का उपयोग कर सकते हैं:

$("[name=gender]").val(["Male"]);

नोट: पासिंग ऐरे महत्वपूर्ण है।

वातानुकूलित संस्करण:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

1
यह बुरा है आपके द्वारा हर तत्व को एक ऐसे मूल्य के लिए स्कैन करना जो मैं नहीं
सुझाता

@MartinBarker क्या आप बता सकते हैं कि आप 'स्कैनिंग' से पुरुषों को क्या देते हैं?
सरम

DOM सर्च करना, अगर आप कुछ नहीं बल्कि एक विशेषता का उपयोग करते हैं, तो आपके फॉरवर्ड jQuery को हालांकि DOM में हर एलीमेंट में जाना और उस मैच के लिए उसी तरह से चेक करना, जैसे कि आप $("*")इसका उपयोग करते थे, यह सब कुछ मेल खाता होगा इसलिए आपको लीज $("input")या आईडी पर एक प्रकार का उपयोग करना चाहिए डोम के रूप में आदर्श होना आइडी के पास एक तत्व प्राप्त करने के लिए देशी कॉल है
बर्कर्मन 01

@MartinBarker - मैं सहमत हूँ। आमतौर पर मैं फॉर्म आईडी के साथ चयनकर्ता उपसर्ग करता हूं या संदर्भ परम प्रदान करता हूं। वर्तमान में DOM को स्कैन करना jQuery का प्रयास नहीं है, लेकिन आंतरिक ब्राउज़र इंजन है, document.querySelectorAllजो सभी काम करता है।
सर्व

इसके बाद के संस्करण, उपयोग चिंताओं को दूर करने $("input[name=gender]")या $("input[name=gender]:radio")या (आधुनिक ब्राउज़रों के लिए)$("input[name=gender][type=radio]")
डेविड Balažic

7

यदि आप चाहते हैं कि यह वास्तव में गतिशील हो और आने वाले डेटा से मेल खाती रेडियो का चयन करें, तो यह काम करता है। यह पास किए गए डेटा के लिंग मान का उपयोग कर रहा है या डिफ़ॉल्ट रूप से उपयोग कर रहा है।

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};


3

और यदि आप अपने मॉडल से एक मान पास करना चाहते हैं और उपयोग के बजाय, मूल्य के आधार पर समूह से एक रेडियो बटन का चयन करना चाहते हैं:

jQuery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

और HTML:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>

2

उस सब की जरूरत नहीं है। सरल और पुराने HTML के साथ आप जो चाहें हासिल कर सकते हैं। यदि आप रेडियो को इस तरह से डिफ़ॉल्ट रूप से जांचना चाहते हैं:
<input type='radio' name='gender' checked='true' value='Male'>
जब पृष्ठ लोड होता है, तो यह जांचा जाएगा।


3
हां, लेकिन मुझे इसकी आवश्यकता है कि यह गतिशील हो क्योंकि संदर्भित साइट पेज लोड पर चूक में गुजरती है। मुझे इस प्रश्न के बारे में सोचते हुए कुछ समय हो गया है, इसलिए मुझे आशा है कि मैं समझ रहा हूँ कि आप क्या कहना चाह रहे हैं
Phill Pafford


2

यहाँ उपरोक्त विधियों के साथ उदाहरण दिया गया है:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

जावास्क्रिप्ट में:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

1

रेडियो इनपुट मान प्राप्त करते समय इस व्यवहार पर ध्यान दें:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

तो $('input[name="myRadio"]').val()रेडियो इनपुट के चेक किए गए मान को वापस नहीं करता है, जैसा कि आप उम्मीद कर सकते हैं - यह पहले रेडियो बटन के मूल्य को लौटाता है।


1

डे एस्टा फॉर्मा जेक्वरी ओबेटीन सोल एल एल एलिमेंटो

$('input[name="radioInline"]:checked').val()

2
आपको अपने उत्तर का वर्णन करने और अपने कोड को प्रारूपित करने की आवश्यकता है
माइकल

0

// यदि आप इसे जावास्क्रिप्ट पर कर रहे हैं या बैकबोन की तरह एक ढांचा है, तो आप इस का सामना करेंगे जिससे आप कुछ इस तरह से हो सकते हैं

$MobileRadio = $( '#mobileUrlRadio' );

जबकि

$MobileRadio.checked = true;

काम नहीं करेगा,

$MobileRadio[0].checked = true;

मर्जी।

आपके चयनकर्ता ऊपर के अन्य लोगों के रूप में भी अनुशंसित हो सकते हैं।


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