jQuery $("#radioButton").변경(...)이(가) 선택 취소 중에 실행되지 않음

jQuery $("#radioButton").변경(...)이(가) 선택 취소 중에 실행되지 않음

약 한 달 전에 Mitt의 질문은 답이 없었습니다.안타깝게도, 저는 지금 같은 상황에 직면하고 있습니다.

http://api.jquery.com/change/ #1800-13393995

상황은 다음과 같습니다.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>

보아하니...change()기능은 라디오 단추를 선택한 경우에만 호출되며, 선택을 취소한 경우에는 호출되지 않습니다.사용한 솔루션은 변경 이벤트를 모든 라디오 단추에 바인딩하는 것입니다.

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

또는 모든 라디오 버튼에 동일한 이름을 지정할 수 있습니다.

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

다음은 작업 중인 jsfiddle 예제입니다(Chris Porter의 코멘트에서 업데이트됨).

@Ray의 설명에 따르면, 당신은 다음과 같은 이름을 사용하는 것을 피해야 합니다..그들 안에.이러한 이름은 jQuery 1.7.2에서는 작동하지만 다른 버전에서는 작동하지 않습니다(jfidle 예제).

<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'/>                  

재쿼리 파트

$(".rg").change(function () {

if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', 'disabled');
        }
                    });

여기 데모가 있습니다.

이름을 지정하여 모든 라디오 단추에 한 번에 바인딩할 수 있습니다.

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

사용 예: http://jsfiddle.net/Ey4fa/

일반적으로 이 방법은 저에게 유용합니다.

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

내 문제는 비슷했고 이것은 나에게 효과가 있었습니다.

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

그 라디오 버튼들이 안에 있다고 가정해 보겠습니다.div그것은 아이디가 있습니다.radioButtons및 라디오 버튼의 이름이 동일한지 여부(예:commonName그러면:

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

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

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

언급URL : https://stackoverflow.com/questions/5176803/jquery-radiobutton-change-not-firing-during-de-selection