jQuery $(“#radioButton”)。更改(…)在取消select期间不会触发

大约一个月前,米特的问题没有得到答复。 可悲的是,我现在正遇到同样的情况。

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

这是情况:我正在使用jQuery来捕获单选button中的更改。 当select单选button时,我启用编辑框。 当单选button被取消select时,我想要编辑框被禁用。

启用作品。 当我在组中select不同的单选button时, 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> 

看起来像change()函数只是当你检查一个单选button时调用,而不是当你取消选中。 我使用的解决scheme是将更改事件绑定到每个单选button:

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

或者你可以给所有的单选button同名:

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

这是一个可用的jsfiddle示例 (从Chris Porter的评论更新)。

Per @ Ray的评论,你应该避免使用名字. 在他们中。 这些名称在jQuery 1.7.2中工作,但不在其他版本中( jsfiddle示例 )。

 <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

您可以通过名称一次绑定到所有单选button:

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

在这里工作的例子: http : //jsfiddle.net/Ey4fa/

这通常适用于我:

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

我的问题是类似的,这对我工作:

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

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

假设这些单选button位于具有id radioButtons ,并且单选button具有相同的名称(例如commonName ),那么:

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

未取消select的change事件是期望的行为。 你应该在整个无线电组上运行一个select器,而不仅仅是一个单选button。 而你的收音机组应该有相同的名称(不同的值)

考虑下面的代码:

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

我有和你一样的用例,即当一个特定的单选button被选中时显示一个input框。 如果这个事件也被取消选中,我会每次得到2个事件。

同样的问题在这里,这工作得很好:

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