jQuery $("#radioButton").change(...) 在取消选择期间未触发
Posted
技术标签:
【中文标题】jQuery $("#radioButton").change(...) 在取消选择期间未触发【英文标题】：jQuery $("#radioButton").change(...) not firing during de-selection 【发布时间】：2011-07-07 19:15:03 【问题描述】：大约一个月前，米特的问题无人回答。可悲的是，我现在也遇到了同样的情况。
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>
【问题讨论】：
你当前的代码只会监听id=r1单选按钮的变化
如果选择了id=r2，是否应该取消选择id=r1？取消选择单选按钮没有被此捕获？
chk 这可能会有所帮助jsfiddle.net/aqZgs
不要使用removeAttr('disabled')，使用prop()改变状态，见my answer。
【参考方案1】：
看起来change() 函数仅在您选中单选按钮时调用，而不是在您取消选中它时调用。我使用的解决方案是将更改事件绑定到每个单选按钮：
$("#r1, #r2, #r3").change(function ()
或者您可以为所有单选按钮指定相同的名称：
$("input[name=someRadioGroup]:radio").change(function ()
这是一个有效的jsfiddle example（根据 Chris Porter 的评论更新。）
根据@Ray 的评论，您应该避免使用带有. 的名称。这些名称在 jQuery 1.7.2 中有效，但在其他版本中无效 (jsfiddle example.)。
【讨论】：
jsFiddle 解决方案设置为 Mootools 而不是 jQuery 并阻止它运行。尝试此解决方案以查看行为：jsfiddle.net/N9tBx。我添加了一个更改的日志，您可以轻松地看到当检查选中的单选按钮时未被选中此选项后的更改事件。 span> 输入的“[name=someRadioGroup]”语法错误。正确的语法是：“input[name=someRadioGroup]:radio”。另外值得注意的是，这种方法只适用于 JQuery 的 1.7.2 版本。已为此提交了一个错误。如果您好奇，请参阅：jsfiddle.net/zn7q2/2 以获取此错误的示例。 @Ray：该错误仅发生在名称中带有点的名称中。没有点它可以正常工作，请参阅jsfiddle.net/zn7q2/4 如果您更改为“input[name='DateSearchOptions.Test']”（单引号括起来的名称），则该示例适用于点：jsfiddle.net/4hTxn 代码 "if ($("#myCheckbox").attr("checked"))" 对我不起作用，我不得不使用 "if ($("#myCheckbox") .is(":checked"))".【参考方案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
【讨论】：
这个有效，不像其他那些被标记为正确的：S +1。 Andomar 的解决方案有效，但这对我来说更有意义。如果表单更改或具有动态数量的字段，使用类选择器可以防止必须更改函数。是的，为死灵投票！ （虽然现在 2 年后 jQuery 建议使用 prop() 而不是 attr()。api.jquery.com/prop) 应将.attr('checked') 更改为.prop('checked')。
不好的例子，这不是它的做法。见my other answer for disabling elements (removing attributes is wrong)。【参考方案3】：
您可以按名称一次绑定到所有单选按钮：
$('input[name=someRadioGroup]:radio').change(...);
这里的工作示例： http://jsfiddle.net/Ey4fa/
【讨论】：
对此的一个变体是 $("form input:radio").change(...);并测试特定的单选按钮条件 prop('checked')。这在 ASP.NET 中使用动态 RadioButtonList 时非常有用。【参考方案4】：这通常对我有用：
if ($("#r1").is(":checked"))
【讨论】：
【参考方案5】：假设这些单选按钮位于 div 中，其 ID 为 radioButtons，并且单选按钮具有相同的名称（例如 commonName），那么：
$('#radioButtons').on('change', 'input[name=commonName]:radio', function (e)
console.log('You have changed the selected radio button!');
);
【讨论】：
【参考方案6】：我的问题很相似，这对我有用：
$('body').on('change', '.radioClassNameHere', function() ...
【讨论】：
【参考方案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> ";
【讨论】：
这没有回答 OPs 的原始问题。您在这里没有使用 jQuery，而是使用 PHP 来处理检查逻辑，而不是 Javascript。【参考方案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);
);
我的用例与您的相同，即在选择特定单选按钮时显示输入框。如果事件在取消选择时也被触发，我每次都会得到 2 个事件。
【讨论】：
【参考方案9】：同样的问题，这工作得很好：
$('input[name="someRadioGroup"]').change(function()
$('#r1edit:input').prop('disabled', !$("#r1").is(':checked'));
);
【讨论】：
以上是关于jQuery $("#radioButton").change(...) 在取消选择期间未触发的主要内容，如果未能解决你的问题，请参考以下文章