如何在更改事件中使用收音机？

Posted 2023-02-22

【中文标题】如何在更改事件中使用收音机？

【英文标题】：How to use radio on change event?

【发布时间】：2012-10-20 14:45:36

【问题描述】：

我有两个单选按钮 在更改事件上我想要更改按钮这怎么可能？ 我的代码

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

【问题讨论】：

如果条件都与“分配”进行比较，则将其更改为转移..它工作正常..

我相信if($("input[name='bedStatus']:checked").val() == 'allot')可以写成if($("input[name='bedStatus']").val() == 'allot')

【参考方案1】：

将类“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;
          
        );

【参考方案2】：

简单的ES6 （仅限javascript）解决方案。

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>

【参考方案3】：

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

【参考方案4】：

上述答案的改编...

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

【讨论】：

使用'on'和上面的答案有什么区别？

@okenshield .on() 确实在上述方面有所收获，但是，当考虑到动态选择器时，它肯定是 jQuery 1.7+ 中的唯一方法

@Ohgodwhy - on 当您为事件委托提供上下文时，甚至为动态选择器提供上下文时，如您所说，但您编写它的方式与上述答案完全相同。

【参考方案5】：

如果单选按钮是动态添加的，你可能希望使用这个

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

【参考方案6】：

您可以使用 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/

请注意，您在 if 语句中将值与 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);
);

【参考方案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】：

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

【参考方案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】：

更简单、更简洁的方法是使用带有@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;
                
);​

【参考方案11】：

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

【讨论】：

使用this.checked 代替$(this).is(":checked")。它是纯 JS，因此速度要快得多。