[JQUERY] 어떻게 변경 이벤트에 라디오를 사용 하는가?

어떻게 변경 이벤트에 라디오를 사용 하는가?

해결법

1. ---

   1.당신은 현재의 입력 요소를 참조하는이를 사용할 수 있습니다.

   당신은 현재의 입력 요소를 참조하는이를 사용할 수 있습니다.

   $('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/

   주 문하고 경우에 모두 충당에 대한 값을 비교하는 것을 : 무선 선택이되지 않습니다.

   당신이 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);
   });
   

2. ---

   2.위의 대답의 적응 ...

   위의 대답의 적응 ...

   $ ( '입력 [TYPE = 라디오] [NAME = bedStatus]). ('변화 '의 함수 () { 스위치 ($ (이) .val ()) { 경우 '충당' 경고 ( "충당 타이어가요 Bhai"); 단절; 경우 '전송' 경고 ( "전송 타이어가요"); 단절; } }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 충당 전송

   http://jsfiddle.net/xwYx9

3. ---

   3.간단하고 깨끗한 방법으로 클래스를 사용하는 것입니다 Ohgodwhy의 대답 @

   간단하고 깨끗한 방법으로 클래스를 사용하는 것입니다 Ohgodwhy의 대답 @

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

4. ---

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

   JS 바이올린

5. ---

   5.onchange를 기능을 사용하여

   onchange를 기능을 사용하여

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

6. ---

   6.간단한 ES6 (자바 스크립트 만) 솔루션입니다.

   간단한 ES6 (자바 스크립트 만) 솔루션입니다.

   document.forms.demo.bedStatus.forEach (무선 => { radio.addEventListener ( '변화'() => { 경고 (`$ {document.forms.demo.bedStatus.value} 타이어 Gayo`); }) }); <양식 이름 = "데모"> 충당 전송

7. ---

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

8. ---

   8.라디오 버튼을 동적으로 추가하는 경우에는이를 사용하실 수 있습니다

   라디오 버튼을 동적으로 추가하는 경우에는이를 사용하실 수 있습니다

   $(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;
       }     
   });
   

9. ---

   9.

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

10. ---

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

11. ---

    11.라디오 버튼에 클래스 "pnradio"를 추가, 다음 .attr로 전환 ( 'ID')

    라디오 버튼에 클래스 "pnradio"를 추가, 다음 .attr로 전환 ( 'ID')

    <input type="radio" id="sampleradio1" class="pnradio" />
    <input type="radio" id="sampleradio2" class="pnradio" />
        $('.pnradio').click(function() {
              switch ($(this).attr('id')) {
                case 'sampleradio1':
                  alert("xxx");
                  break;
                case 'sampleradio2':
                  alert("xxx");
                  break;
              }
            });
    

from https://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event by cc-by-sa and MIT license