javascript - bootstrap - jquery tutorial




मुझे कैसे पता चलेगा कि jQuery के माध्यम से कौन सा रेडियो बटन चुना गया है? (20)

मेरे पास दो रेडियो बटन हैं और चयनित एक के मूल्य को पोस्ट करना चाहते हैं। मैं jQuery के साथ मूल्य कैसे प्राप्त कर सकता हूं?

मैं उन्हें इस तरह से प्राप्त कर सकता हूं:

$("form :radio")

मुझे कैसे पता चलेगा कि कौन सा चुना गया है?


आईडी myForm साथ किसी प्रपत्र के चयनित radioName आइटम का मान प्राप्त करने के लिए:

$('input[name=radioName]:checked', '#myForm').val()

यहां एक उदाहरण दिया गया है:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>


आप रेडियो चयनकर्ता के साथ चेक किए गए चयनकर्ता का उपयोग कर सकते हैं।

 $("form:radio:checked").val();

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

$("#myform input[type='radio']:checked").val();

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

value = $('input[name=button-name]:checked').val();

एक जेएसएफ जेनरेट रेडियो बटन में ( <h:selectOneRadio> टैग का उपयोग करके), आप यह कर सकते हैं:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

जहां selectOneRadio ID radiobutton_id है और फॉर्म आईडी form_id है

इंगित किए गए नाम के बजाय नाम का उपयोग करना सुनिश्चित करें, क्योंकि jQuery इस विशेषता का उपयोग करता है ( नाम जेएसएफ द्वारा नियंत्रण आईडी जैसा स्वचालित रूप से जेनरेट किया जाता है)।


एक और विकल्प है:

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

चयनित रेडियो का मूल्य प्राप्त करने के लिए जो कक्षा का उपयोग करता है:

$('.class:checked').val()

जावास्क्रिप्ट सरणी में सभी रेडियो बटन मानों को पुनर्प्राप्त करने के लिए निम्नलिखित jQuery कोड का उपयोग करें:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

मेरे मामले में मेरे पास एक ही रूप में दो रेडियो बटन हैं और मैं प्रत्येक बटन की स्थिति जानना चाहता था। यह नीचे मेरे लिए काम किया:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>


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

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

मैंने रेडियो-बटन मानों को सेट करने और प्राप्त करने के लिए एक jQuery प्लगइन लिखा था। यह उन पर "परिवर्तन" घटना का भी सम्मान करता है।

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

एडिन को सक्षम करने के लिए कहीं भी कोड रखें। फिर आनंद लें! यह किसी भी चीज़ को तोड़ने के बिना डिफ़ॉल्ट वैल फ़ंक्शन को ओवरराइड करता है।

आप कार्रवाई में इसे आजमाने के लिए इस jsFiddle पर जा सकते हैं, और देखें कि यह कैसे काम करता है।

Fiddle


यदि आप केवल बूलियन मान चाहते हैं, यानी यदि यह चेक किया गया है या इसे आजमाएं नहीं:

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

यदि आपके पास केवल 1 फॉर्म पर रेडियो बटन का 1 सेट है, तो jQuery कोड इस प्रकार जितना आसान है:

$( "input:checked" ).val()

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

var myRadio = $("input[name=myRadio]");

filter() फ़ंक्शन का उपयोग करें, नहीं find() । ( find() बच्चे / वंश तत्वों को ढूंढने के लिए है, जबकि filter() आपके चयन में शीर्ष-स्तरीय तत्वों की खोज करता है।)

var checkedValue = myRadio.filter(":checked").val();

नोट्स: यह उत्तर मूल रूप से एक और उत्तर को सही कर रहा था जो find() का उपयोग करके अनुशंसित किया गया था, जो तब से बदला गया है। find() अभी भी उस स्थिति के लिए उपयोगी हो सकता है जहां आपके पास पहले से कंटेनर तत्व का संदर्भ था, लेकिन रेडियो बटन के लिए नहीं, उदाहरण के लिए:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

यह ठीक काम करता है

$('input[type="radio"][class="className"]:checked').val()

कामकाजी डेमो

:checked चयनकर्ता checkboxes , radio buttons और चुनिंदा तत्वों के लिए काम करता है। केवल चयनित तत्वों के लिए, :selected चयनकर्ता का उपयोग करें।

के लिए एपीआई :checked Selector


यहां बताया गया है कि मैं फॉर्म कैसे लिखूंगा और चेक किए गए रेडियो को प्राप्त करने के तरीके को संभालेगा।

MyForm नामक एक फॉर्म का उपयोग करना:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

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

$('#myForm .radio1:checked').val();

यदि आप फॉर्म पोस्ट नहीं कर रहे हैं, तो मैं इसका उपयोग करके इसे और सरल बना दूंगा:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

फिर चेक मूल्य प्राप्त हो जाता है:

    $('.radio1:checked').val();

इनपुट पर कक्षा का नाम रखने से मुझे आसानी से इनपुट स्टाइल करने की अनुमति मिलती है ...


साथ ही, जांचें कि क्या उपयोगकर्ता कुछ भी नहीं चुनता है।

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

डेमो : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>


 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

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





radio-button