jQuery $("#radioButton").change(...)在取消选择时未触发

Question

jQuery $("#radioButton").change(...)在取消选择时未触发

javascriptjqueryhtmlradio-button

175

大约一个月前，Mitt的问题没有得到解答。可悲的是，我现在也遇到了同样的情况。

http://api.jquery.com/change/#comment-133939395

这就是情况：我正在使用jQuery来捕获单选按钮的更改。当选择单选按钮时，我会启用编辑框。当取消选择单选按钮时，我希望禁用编辑框。

启用功能可以正常工作。但是当我选择组中的不同单选按钮时，change事件却未被触发。有人知道如何解决吗？

<input type="radio" id="r1" name="someRadioGroup"/> 

<script type="text/javascript">
    $("#r1").change(function () {
        if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', true);
        }
    });
</script>

- antwarpes

你当前的代码只会监听 id=r1 的单选按钮的更改。 - Rafay

1

如果选择了id=r2，应该取消选择id=r1吗？取消单选按钮的选择不会被捕获吗？ - antwarpes

2

检查这个链接，可能会有帮助 http://jsfiddle.net/aqZgs/ - Rafay

不要使用removeAttr('disabled')，使用prop()来改变状态，请参见我的答案。 - basic6

9个回答

35

<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/><br/>
<input type='text' id='r1edit'/>

jQuery 部分

$(".rg").change(function () {

if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', 'disabled');
        }
                    });

这里有一个演示

- Rafay

这个可以工作，不像其他被标记为正确的那些:S - user1090077

+1。Andomar的解决方案可行，但我更喜欢这个。使用类选择器可以避免在表单更改或字段数量动态变化时更改函数。感谢necro投票！（尽管现在两年后，jQuery建议使用prop()而不是attr()。http://api.jquery.com/prop/） - genericHCU

8

еЇФиѓ•е∞Ж.attr('checked')жФєдЄЇ.prop('checked')гАВ - Justin

1

这是一个糟糕的例子，不应该这样做。请参见我的另一个答案以禁用元素（删除属性是错误的）。 - basic6

22

您可以通过名称一次性绑定所有单选按钮：

$('input[name=someRadioGroup]:radio').change(...);

这里提供了一个工作示例： http://jsfiddle.net/Ey4fa/

- jterrace

一个变体是 $("form input:radio").change(...); 并测试特定的单选按钮条件 prop('checked')。当在ASP.NET中使用动态RadioButtonList时，这非常有用。 - Terence Golla

5

这对我通常很有效：

如果 ($("#r1").is(":checked")) {}

- user3052657

4

我有类似的问题，以下方法对我有用：

$('body').on('change', '.radioClassNameHere', function() { ...

- Alex Sim

0

假设那些单选按钮位于具有ID radioButtons 的 div 中，而且这些单选按钮具有相同的名称（例如commonName），那么：

$('#radioButtons').on('change', 'input[name=commonName]:radio', function (e) {
    console.log('You have changed the selected radio button!');
});

- Marko Letic

0

change事件在取消选中时不会触发，这是期望的行为。您应该对整个单选按钮组运行选择器，而不仅仅是单个单选按钮。并且您的单选按钮组应该具有相同的名称（但值不同）

请考虑以下代码：

$('input[name="job[video_need]"]').on('change', function () {
    var value;
    if ($(this).val() == 'none') {
        value = 'hide';
    } else {
        value = 'show';
    }
    $('#video-script-collapse').collapse(value);
});

我有和你一样的使用情况，即在选择特定的单选按钮时显示输入框。如果事件在取消选择时也被触发，每次我都会得到2个事件。

- Vedant Agarwala

0

我也有同样的问题，这个方法之前一直很好用：

$('input[name="someRadioGroup"]').change(function() {
    $('#r1edit:input').prop('disabled', !$("#r1").is(':checked'));
});

- Scaramouche

-1

使用Ajax，对我来说是起作用的：

HTML：

<div id='anID'>
 <form name="nameOfForm">
            <p><b>Your headline</b></p>
            <input type='radio' name='nameOfRadio' value='seed' 
             <?php if ($interviewStage == 'seed') {echo" checked ";}?> 
            onchange='funcInterviewStage()'><label>Your label</label><br>
 </form>
</div>

Javascript：

 function funcInterviewStage() {

                var dis = document.nameOfForm.nameOfRadio.value;

                //Auswahltafel anzeigen
                  if (dis == "") {
                      document.getElementById("anID").innerHTML = "";
                      return;
                  } else { 
                      if (window.XMLHttpRequest) {
                          // code for IE7+, Firefox, Chrome, Opera, Safari
                          xmlhttp = new XMLHttpRequest();
                      } else {
                          // code for IE6, IE5
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange = function() {
                          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              document.getElementById("anID").innerHTML = xmlhttp.responseText;
                          }
                      }
                      xmlhttp.open("GET","/includes/[name].php?id="+dis,true);
                      xmlhttp.send();
                  }
              }

还有 PHP：

//// Get Value
$id = mysqli_real_escape_string($db, $_GET['id']);

//// Insert to database
$insert = mysqli_query($db, "UPDATE [TABLE] SET [column] = '$id' WHERE [...]");

//// Show radio buttons again
$mysqliAbfrage = mysqli_query($db, "SELECT [column] FROM [Table] WHERE [...]");
                  while ($row = mysqli_fetch_object($mysqliAbfrage)) {
                    ...
                  }
                  echo" 
                  <form name='nameOfForm'>
                      <p><b>Your headline</b></p>
                      <input type='radio' name='nameOfRadio' value='seed'"; if ($interviewStage == 'seed') {echo" checked ";} echo" onchange='funcInterviewStage()'><label>Yourr Label</label><br>
                      <input type='radio' name='nameOfRadio' value='startup'"; if ($interviewStage == 'startup') {echo" checked ";} echo" onchange='funcInterviewStage()'><label>Your label</label><br>

                  </form> ";

- Sven

这并没有回答原帖的问题。你没有使用jQuery，而是使用PHP来处理检查逻辑，而不是Javascript。 - Alex Mulchinock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andomar · Accepted Answer

看起来 change() 函数只在选中单选按钮时调用，而不是取消选中时调用。我使用的解决方案是将更改事件绑定到每个单选按钮：

$("#r1, #r2, #r3").change(function () {

或者你可以给所有的单选按钮赋予相同的名称：

$("input[name=someRadioGroup]:radio").change(function () {

这是一个可以工作的jsfiddle示例（更新自Chris Porter的评论）。

根据@Ray的评论，你应该避免使用包含.的名称。这些名称适用于jQuery 1.7.2但不适用于其他版本（jsfiddle示例）。