परिवर्तन घटना पर रेडियो का उपयोग कैसे करें?

Question

मेरे पास परिवर्तन की घटना पर दो रेडियो बटन हैं मैं परिवर्तन बटन चाहता हूं यह कैसे संभव है? मेरा कोड

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

लिपि

<script>
    $(document).ready(function () {
        $('input:radio[name=bedStatus]:checked').change(function () {
            if ($("input[name='bedStatus']:checked").val() == 'allot') {
                alert("Allot Thai Gayo Bhai");
            }
            if ($("input[name='bedStatus']:checked").val() == 'transfer') {
                alert("Transfer Thai Gayo");
            }
        });
    });
</script>

Comments

यदि दोनों स्थितियों की तुलना 'आवंटन' से की जाती है, तो इसे स्थानांतरित करने के लिए बदल दें .. यह ठीक काम करती है ..

— हिमंत कुमार

मेरा मानना ​​है कि if($("input[name='bedStatus']:checked").val() == 'allot')लिखा जा सकता हैif($("input[name='bedStatus']").val() == 'allot')

— mplungjan

तैयार काम मा लग्यौ हो आपदाने। थैंक्यू अलॉट थाई गुय भाई।

— हर्ष मनवर

Answer 1

आप उपयोग कर सकते हैं thisजो वर्तमान inputतत्व को संदर्भित करता है ।

$('input[type=radio][name=bedStatus]').change(function() {
    if (this.value == 'allot') {
        alert("Allot Thai Gayo Bhai");
    }
    else if (this.value == 'transfer') {
        alert("Transfer Thai Gayo");
    }
});

http://jsfiddle.net/4gZAT/

ध्यान दें कि आप allotदोनों के खिलाफ मूल्य की तुलना कर रहे हैं यदि कथन और :radioचयनकर्ता पदावनत है।

मामले में है कि आप jQuery का उपयोग नहीं कर रहे हैं, आप उपयोग कर सकते हैं document.querySelectorAllऔरHTMLElement.addEventListener विधियों का :

var radios = document.querySelectorAll('input[type=radio][name="bedStatus"]');

function changeHandler(event) {
   if ( this.value === 'allot' ) {
     console.log('value', 'allot');
   } else if ( this.value === 'transfer' ) {
      console.log('value', 'transfer');
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});

Comments

यदि मैं इनपुट रेडियो को रीसेट करता हूं और रेडियो परिवर्तन की घटना को ट्रिगर करता हूं, तो वास्तविक आउटपुट क्या है?

— आशीष मेहता

:radioचयनकर्ता (jQuery में) पदावनत नहीं है।

— मिकेल अल। विकन्स

बस एक नोट: मैं उस भाषा को नहीं समझता।

— अपरिवर्तित

@Piterden सबसे पहले, यह जवाब 6 साल पुराना है! ES6 में एरो फ़ंक्शंस उन स्थितियों के लिए पेश किए गए हैं जब आप या तो thisमूल्य के बारे में परवाह नहीं करते हैं या आप thisअपने हैंडलर में आसपास के संदर्भ मूल्य का उपयोग करना चाहते हैं , यह स्निपेट उपयोग करता है this। और नियमित कार्यों का उपयोग करने का दावा करना "पुरानी बुरी प्रथा है" बिलकुल व्यर्थ है! साथ ही, पुराने ब्राउज़र तीर फ़ंक्शन सिंटैक्स का समर्थन नहीं करते हैं और पुराने ब्राउज़र का समर्थन करने के Array#includesलिए एक ट्रांसपिलर और एक शिम का उपयोग करना चाहिए। एक सरल उत्तर क्यों दें जिसका विशेष रूप से तीर के कार्यों के साथ कुछ भी जटिल नहीं है?

— अपरिभाषित

इसके बजाय this, मैं उपयोग करता हूं event.target।

— बोबोर्ट

Answer 2

उपरोक्त उत्तर का एक अनुकूलन ...

$('input[type=radio][name=bedStatus]').on('change', function() {
  switch ($(this).val()) {
    case 'allot':
      alert("Allot Thai Gayo Bhai");
      break;
    case 'transfer':
      alert("Transfer Thai Gayo");
      break;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

http://jsfiddle.net/xwYx9

Comments

'ऑन' और उपरोक्त उत्तर का उपयोग करने में क्या अंतर है?

— ओकेन्शील्ड

@okenshield .on()वास्तव में उपरोक्त के संबंध में लाभ पर है, हालांकि, गतिशील चयनकर्ताओं को ध्यान में रखते हुए, यह निश्चित रूप से jQuery

— 1.7+

@Ogodwhy - onलाभ तब होता है जब आप घटना के प्रतिनिधिमंडल के लिए एक संदर्भ प्रदान करते हैं, या यहां तक ​​कि डायनामिक चयनकर्ताओं के लिए भी जैसा कि आपने कहा था, लेकिन जिस तरह से आपने इसे लिखा है, ठीक उसी तरह उपरोक्त उत्तर है।

— ह्यूगो सिल्वा

ध्यान दें कि स्विच आपको $ (इस) .val () को नहीं दोहराने की अनुमति देता है, आपको इस संस्करण को पसंद करना चाहिए।

— काइलके

Answer 3

एक सरल और साफ-सुथरा तरीका यह होगा कि आप @ ओहगोदवी के उत्तर के साथ एक क्लास का उपयोग करें

<input ... class="rButton">
<input ... class="rButton">

लिपि

​$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'allot' :
            alert("Allot Thai Gayo Bhai");
            break;
        case 'transfer' :
            alert("Transfer Thai Gayo");
            break;
    }            
});​

Answer 4

$(document).ready(function () {
    $('#allot').click(function () {
        if ($(this).is(':checked')) {
            alert("Allot Thai Gayo Bhai");
        }
    });

    $('#transfer').click(function () {
        if ($(this).is(':checked')) {
            alert("Transfer Thai Gayo");
        }
    });
});

जेएस फिडल

Comments

$(this).is(":checked")उपयोग के बजाय this.checked। यह शुद्ध जेएस है और इसलिए यह बहुत तेज है।

— Gh61

@ Gh61, मैं उत्सुक था और एक परीक्षण किया। प्योर जेएस बहुत तेज है ।

— माइकल क्रैंशव

Answer 5

ऑनचेज फ़ंक्शन का उपयोग करें

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot" onchange="my_function('allot')">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer" onchange="my_function('transfer')">Transfer

<script>
 function my_function(val){
    alert(val);
 }
</script>

Answer 6

सरल ES6 (केवल जावास्क्रिप्ट) समाधान।

document.forms.demo.bedStatus.forEach(radio => {
  radio.addEventListener('change', () => {
    alert(`${document.forms.demo.bedStatus.value} Thai Gayo`);
  })
});

<form name="demo">
  <input type="radio" name="bedStatus" value="Allot" checked>Allot
  <input type="radio" name="bedStatus" value="Transfer">Transfer
</form>

Answer 7

document.addEventListener('DOMContentLoaded', () => {
  const els = document.querySelectorAll('[name="bedStatus"]');

  const capitalize = (str) =>
    `${str.charAt(0).toUpperCase()}${str.slice(1)}`;

  const handler = (e) => alert(
    `${capitalize(e.target.value)} Thai Gayo${e.target.value === 'allot' ? ' Bhai' : ''}`
  );

  els.forEach((el) => {
    el.addEventListener('change', handler);
  });
});

Answer 8

<input type="radio" name="radio"  value="upi">upi
<input type="radio" name="radio"  value="bankAcc">Bank

<script type="text/javascript">
$(document).ready(function() {
 $('input[type=radio][name=radio]').change(function() {
   if (this.value == 'upi') {
    //write your logic here

    }
  else if (this.value == 'bankAcc') {
    //write your logic here
 }
 });
 </script>

Answer 9

यदि रेडियो बटन गतिशील रूप से जोड़े जाते हैं, तो आप इसका उपयोग करना चाह सकते हैं

$(document).on('change', 'input[type=radio][name=bedStatus]', function (event) {
    switch($(this).val()) {
      case 'allot' :
        alert("Allot Thai Gayo Bhai");
        break;
      case 'transfer' :
        alert("Transfer Thai Gayo");
        break;
    }     
});

Answer 10

$(document).ready(function () {
    $('input:radio[name=bedStatus]:checked').change(function () {
        if ($("input:radio[name='bedStatus']:checked").val() == 'allot') {
            alert("Allot Thai Gayo Bhai");
        }
        if ($("input:radio[name='bedStatus']:checked").val() == 'transfer') {
            alert("Transfer Thai Gayo");
        }
    });
});