কীভাবে পরিবর্তন ইভেন্টে রেডিও ব্যবহার করবেন?

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')

— এমপিপ্লুজন

রেডি কাম মা লাগু হো আপনে। থানকিউ বরাদ্দ থাই গ্যু ভাই।

— হর্ষ মনভার

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 মধ্যে) অবচিত করা হয় না।

— মিকেল আল। ভিসেনস

কেবল একটি নোট: আমি সেই ভাষাটি বুঝতে পারি না।

— undefined

@ পিটারডেন সবার আগে, এই উত্তরটি 6 বছর বয়সী! ES6-এ তীর ফাংশনগুলি পরিস্থিতির জন্য চালু করা হয়েছে যখন আপনি হয় thisমানটির যত্ন নেন না বা আপনি thisআপনার হ্যান্ডলারের আশেপাশের প্রসঙ্গ মানটি ব্যবহার করতে চান , এই স্নিপেট ব্যবহার করে this। এবং নিয়মিত ফাংশন ব্যবহার করে দাবি করা "পুরানো খারাপ অভ্যাস" সম্পূর্ণ অর্থহীন! এছাড়াও, পুরানো ব্রাউজারগুলি তীর ফাংশন সিনট্যাক্স সমর্থন করে না এবং পুরানো ব্রাউজারগুলিকে সমর্থন করার Array#includesজন্য একটি ট্রান্সপ্লার এবং শিম ব্যবহার করা উচিত। তীর ফাংশন জটিল করে বিশেষ করে কিছু করার নেই এমন একটি সাধারণ উত্তর কেন?

— undefined

পরিবর্তে 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

'অন' ব্যবহার এবং উপরের উত্তরটির মধ্যে পার্থক্য কী?

— ওকেনশিল্ড

উপরোক্ত সম্পর্কিত @ ওকেনশিল্ডের .on()সত্যই উপকার হয়েছে, তবে, গতিশীল নির্বাচকদের বিবেচনায় নেওয়ার পরে, অবশ্যই jQuery 1.7+ এ যাওয়ার একমাত্র উপায়

— ওহগডভি

@ অহগোদাই - 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

@ জি 61, আমি কৌতূহলী ছিলাম এবং একটি পরীক্ষা চালিয়েছিলাম। খাঁটি জেএস অনেক দ্রুত ।

— মাইকেল ক্রেনশা

Answer 5

Onchage ফাংশন ব্যবহার করুন

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