单选按钮选中事件处理

Question

在我的应用程序中，我需要一个单选按钮组，在其中每当选中一个单选按钮时，都会弹出一个警告，以便我可以使用jQuery将其值发布到ajax post中。

请问您能帮我使用jQuery实现吗？

- tarique

Answer 1

尝试像这样做：

$(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    {
      alert($(this).val());
    }
  });
});

如果给你的单选按钮添加了一个类，那么你可以用 $('.someclass') 替换代码中的 $('input[type="radio"]')。

- Sarfraz

---

@David Murdoch：是的，你可以使用“change”。 - Sarfraz

当使用键盘或其他控件操作表单控件时，$.click()不会被调用。点击函数并非在所有情况下都有效。 - e-info128

Answer 2

2017年更新：嘿。这是一个糟糕的答案。不要使用它。在旧时代，这种jQuery用法很普遍。那时可能还有效。只需阅读它，意识到它是可怕的，然后转向（或向下投票或其他）更适合今天的jQuery的其他答案。

$("input[type=radio]").change(function(){
    alert( $("input[type=radio][name="+ this.name + "]").val() );
});

- David Murdoch

---

你可以直接使用 $(this).val() 吗？ - n s

我花了一些时间才明白这里的$("input[type=radio][name="+ this.name + "]").val()是在做什么。你能否编辑你的帖子并将其更改为alert( $(this).val() );？我想这可能是被投票反对的原因。 - Andrew Surzhynskyi

@Applejack：不要改变已经正确的东西，只需添加另一个。这比 alert( $(this).val() ); 更好。 - jimjim

$.change()在取消选择单选框时不会调用。此函数实际上是onCheck函数。 - e-info128

同意Applejack的观点，答案应该被更改（或者被downvote到无底洞，因为它是错误的;-)）。请参见：https://plnkr.co/edit/563jmzFvukpqHlA0HnvC?p=preview。当检查更改发生时，它将被触发，但结果始终相同。 - Adam Plocher

@e-info128 取消选中单选按钮不应该是一件事...这有点违背了单选按钮的目的。 - Adam Plocher

Answer 3

HTML代码如下：

<input type="radio" name="theName" value="1" id="option-1">
<input type="radio" name="theName" value="2">
<input type="radio" name="theName" value="3">

Javascript代码：

$(document).ready(function(){
    $('input[name="theName"]').change(function(){
        if($('#option-1').prop('checked')){
            alert('Option 1 is checked!');
        }else{
            alert('Option 1 is unchecked!');
        }
    });
});

在具有名称为“theName”的多个单选按钮中，检测选项1何时被选中或取消选中。在所有情况下都有效：单击控件、使用键盘、使用操纵杆、自动更改来自其他动态函数的值等。

- e-info128

Answer 4

您可以使用JQuery的change方法来获取当前选中单选框的值，以下是示例代码：

$(document).on('change', '[type="radio"]', function() {
    var currentlyValue = $(this).val(); // Get the radio checked value
        
    alert('Currently value: '+currentlyValue); // Show a alert with the current value
});

你可以将选择器'[type="radio"]'更改为你想要的类或id。

- Radames E. Hernandez

Answer 5

$("#expires1").click(function(){
     if (this.checked)
        alert("testing....");
});

- mital korat

---

无论这个答案是否正确，如果没有解释为什么它是答案，它就不会教任何东西。而且，考虑到这个问题已经超过8年了，这并没有什么帮助。 - jwenting

Answer 6

$(document).on('change','.radio-button', function(){

    const radio = $(this);

    if (radio.is(':checked')) {
      console.log(radio)
    }

});

- Lu Blue