我有两个单选按钮 在改变事件我想改变按钮怎么可能? 我的代码

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

当前回答

简单的ES6(仅javascript)解决方案。

document.forms.demo.bedStatus.forEach(radio => { radio.addEventListener('change', () => { alert('${document.forms.demo.bedStatus.value} Thai Gayo'); }) }); <表单名称=“演示”> <输入类型=“收音机”名称=“床状态”值=“分配”选中>分配 <输入类型=“收音机”名称=“床状态”值=“转移”>转移 </form>

其他回答

在单选按钮中添加类"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;
          }
        });

您可以使用this引用当前输入元素。

$('input[type=radio][name=bedStatus]').change(function() {
    if (this.value == 'allot') {
        // ...
    }
    else if (this.value == 'transfer') {
        // ...
    }
});

http://jsfiddle.net/4gZAT/

请注意,您在if语句和:radio选择器中都将值与allocate进行了比较。

如果您不使用jQuery,您可以使用文档。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);
});

如果单选按钮是动态添加的,您可能希望使用它

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

一种更简单、更清晰的方法是使用带有@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;
    }            
});​
$(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");
        }
    });
});