如何在变更事件中使用广播？

本文翻译自：How to use radio on change event?

I have two radio button on change event i want change button How it is possible? 我在更改事件上有两个单选按钮我想要更改按钮怎么可能？ My Code 我的密码

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

Script 脚本

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

---

#1楼

参考：https://stackoom.com/question/tBfz/如何在变更事件中使用广播

---

#2楼

You can use this which refers to the current input element. 您可以使用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/ http://jsfiddle.net/4gZAT/

Note that you are comparing the value against allot in both if statements and :radio selector is deprecated. 请注意，您已在if语句和:radio选择器均已弃用的情况下，将值与allot比较。

In case that you are not using jQuery, you can use the document.querySelectorAll and HTMLElement.addEventListener methods: 如果您不使用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);
});

---

#3楼

An adaptation of the above answer... 以上答案的改编...

 $('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 http://jsfiddle.net/xwYx9

---

#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 Fiddle JS小提琴

---

#5楼

A simpler and cleaner way would be to use a class with @Ohgodwhy's answer 一种更简单，更简洁的方法是将类与@Ohgodwhy的答案一起使用

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

Script 脚本

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

---

#6楼

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