JQuery $(“ # radiButton”) . change (...)在取消选择期间没有触发

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

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>
354556 次浏览
小开
最佳答案

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

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

或者你可以给所有的单选按钮起同样的名字:

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

这里是一个工作 举个例子(更新自 Chris Porter 的评论)

根据@Ray 的评论，您应该避免使用带有 .的名称。这些名称可以在 jQuery 1.7.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

小开

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

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

例如: Http://jsfiddle.net/ey4fa/

小开

这通常对我有效:

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

小开

假设这些单选按钮位于具有 id 为 radioButtons的 div内部，单选按钮具有相同的名称(例如 commonName) ，那么:

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

我的问题与此类似，这对我很有效:

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

在阿贾克斯工作，对我来说:

网址:

<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> ";
小开

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个事件。

小开

这里也有同样的问题，这个很好用:

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

提交答案