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