jQuery radio onchange toggle parent element?

StackOverflow https://stackoverflow.com/questions/964961

  •  12-09-2019
  •  | 
  •  

문제

다음을 살펴보십시오.

$('#myRadio').change(function() {           

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    } else {                              
        $(this).parent().removeClass('green');
    }
});

마크 업은 다음과 같은 것처럼 보입니다

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

라디오를 전환 할 때 JavaScript 코드 위는 '녹색'을 TD 태그에 적용합니다. 그러나 선택을 다른 선택으로 변경하면 녹색을 다른 녹색에 추가하지만 이전에 선택한 라디오에서 녹색을 제거하지는 않습니다.

라디오 옵션을 선택하면 부모 TD의 클래스가 녹색으로 변경되고 다른 사람을 선택하면 새로 선택한 것만 녹색을 추가 할 수 있도록 어떻게 작동하게합니까?

"일부 텍스트 3"등이 포함 된 첫 번째 이전 TD의 클래스를 변경할 수 있습니까 ??

감사.

도움이 되었습니까?

해결책

다음과 같은 것을 시도하십시오.

if($(this).is(':checked'))  {
    $(this).parent().parent().parent().find('.green').removeClass('green');
    $(this).parent().addClass('green');
}

이렇게하면 현재 라디오 버튼 그룹화의 테이블 요소가 발견되고 그린 클래스의 요소를 찾고 클래스를 제거합니다.

또는 페이지에 라디오 버튼 그룹이 하나만 있으면 더 간단합니다.

$('.green').removeClass('green');

다른 팁

라디오 버튼 및 확인란에서 Change () 이벤트를 사용해서는 안됩니다. 브라우저에서 약간의 멍청하고 일관성이없는 행동을합니다 (IE의 모든 버전에서 문제가 발생합니다).

대신 Click () 이벤트를 사용하십시오 (키보드로 라디오 버튼을 활성화/선택하면 클릭 이벤트가 발사되므로 접근성에 대해 걱정하지 마십시오).

그리고 여기 다른 사람들이 지적했듯이 녹색을 재설정하는 것도 쉽습니다.

따라서 코드를 간단히 변경하십시오 

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

편집 : 댓글에 요청 된대로 이전 TD도 변경합니다.

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

또는 더 나은 것은 부모 행 녹색의 모든 TD 요소를 돌리는 것입니다.

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});

이 시도:

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}

방금 라디오 버튼이 얼마나 깊이 중첩되어 있는지 신경 쓰지 않는 솔루션을 작성했으며 라디오 버튼의 이름 속성 만 사용합니다. 이것은이 코드가 어디서나 수정하지 않고 작동한다는 것을 의미합니다. 저는 하나의 라디오 버튼이 같은 이름을 가진 코호트와 다르게 중첩되는 이상한 상황이 있기 때문에 작성해야한다고 생각합니다.

$('input[type="radio"]').change( function() {
    // grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    // iterate through each  
    // if checked, set its parent label's class to "selected"
    // if not checked, remove the "selected" class from the parent label
    // my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
    // so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
        if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected');
        else $(this_radio_set[i]).parents('label').removeClass('selected');
    }
});

내 제안은 다음과 같습니다.

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});

다음은 저에게 큰 도움이 된 솔루션입니다.

var $boxes=$('input:radio');
var $parents = $boxes.parent();
$boxes.click(function(){
    $parents.filter('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});
$boxes.filter(':checked').parent().addClass('selected');

특징:

  • 더 빠르게. 확인란 목록 만 한 번만 선택하십시오.
  • 의존하지 않습니다 : 확인. 브라우저에서 "클릭"및 "변경된"이 실행되는 특정 순서가 있는지 확실하지 않습니다.
  • 용도 : [type = "radio"] 대신 라디오가 권장되는 jQuery입니다.
  • 라디오 버튼의 기본값에 대해서는 부모의 클래스를 설정합니다.

도움이 되었기를 바랍니다!

나는 이것이 이것을하는 것이 가장 좋고 유연한 방법이라고 생각합니다.

테이블을 잊고 (Google은 그 이유를 많이 알고 있음) 아래와 같은 랩퍼를 사용하십시오.

<div id="radio_wrapper">
    <span class="radio">
        <label for="myRadio1" class="myRadio">Some text 1 </label>
        <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio2" class="myRadio">Some text 2 </label>
        <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio3" class="myRadio">Some text 3 </label>
        <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
    </span>
</div

이와 같은 CSS와 형식

span.radio {
    background-color: #cccccc;
}
span.currentGreen {
    background-color: #ccffcc;
}

이 스크립트를 사용하여 원하는 것과 정확히 동일하게 수행 할 수 있습니다.

$('.myRadio').change(function() {           
    $('.currentGreen').removeClass('currentGreen'); // remove from all
    if ($(this).is(':checked')) {
        $(this).parent().addClass('currentGreen'); // add to current
    }
});

이 경우 필터 () 및 find ()를 사용하는 것을 좋아하지 않습니다.이 경우에는 불필요한 리소스를 사용하기 때문입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top