jQuery $（“＃radioButton”）。更改（...）在取消选择期间未触发

Question

大约一个月前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> 

Answer 1

看起来像当您检查一个单选按钮，而不是当你取消它的change()功能仅调用。我使用的解决方案是将改变事件绑定到每一个单选按钮：

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

或者你可以把所有的单选按钮同一个名字：

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

这里的工作jsfiddle example（从更新的克里斯·波特评论。）

Per @ Ray的评论，你应该避免在他们中使用.的名字。这些名字在jQuery 1.7.2中起作用，但在其他版本中不起作用（jsfiddle example.）。

Answer 2

<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'); 
     } 
        }); 

这里是DEMO

Answer 3

您可以按名称同时绑定到所有的单选按钮：这里

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

工作例如： http://jsfiddle.net/Ey4fa/

Answer 4

这正常工作对我来说：

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

Answer 5

比方说，那些单选按钮是一个div具有ID radioButtons内的单选按钮具有相同的名称（例如commonName），则：

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

Answer 6

我的问题是相似的，这个工作对我来说：

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

Answer 7

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

Answer 8

的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); 
}); 

我有相同的使用情况下，你的IE浏览器显示一个输入框。如果事件也被取消选中，我会每次获得2个事件。

这里

Answer 9

同样的问题，这只是正常工作：

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