jQuery를 addClass

Question

나는 다음과 같은 코드가 있습니다

<input class="single_text_input group_1" type="text" name="primary_referral" /> 
<input class="single_text_input group_1" type="text" name="secondary_referral" /> 
<input class="group_1" type="radio" name="referral_open" value="Yes" /> Yes 
<input class="group_1" type="radio" name="referral_open" value="No" /> No 
<span id="2" class="red">Referral Group</span> 

무엇 지금 일어나고있는 것은 그 두 라디오 버튼입니다 : 여기

var selectedMarkerClass = 'was-selected'; 

$('.group_1').change(function() { 
    $(this).addClass(selectedMarkerClass); 

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) { 
     $('#2').removeClass('red'); 
    } 
}); 

문제의 HTML입니다 그룹에서 클래스를 삭제하려면 span에서 클래스를 삭제해야합니다. 그룹의 라디오 버튼 중 하나만 변경해야하는 곳에서 작업하고 싶습니다.

Answer 1

click 이벤트는 change 이벤트가 아닙니다.

$('.group_1').click(function() { 
    $(this).addClass(selectedMarkerClass); 

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) { 
     $('#2').removeClass('red'); 
    } 
}); 

업데이트 :

if ($('.' + selectedMarkerClass).length == $('.group_1').length) 

것은 당신을 트립된다. 선택한 클래스가 각 라디오에 추가 된 경우에만 빨간색 클래스를 제거하고 각 라디오를 클릭하면 선택한 클래스 만 추가 할 수 있습니다.

더 좋은 방법은 다음과 같습니다

$('.group_1').click(function() { 
    $('#2').removeClass('red'); 
}); 

적은 코드는 종종 번 더. 라디오를 선택 해제 할 수 없습니다. 따라서 라디오를 클릭하면 적어도 하나를 클릭 할 수 있습니다.

Answer 2

대신 click 이벤트로 시도해보십시오. 첫 번째 라디오 버튼이 포커스를 잃은 후 change이 시작되므로 두 번째 클릭 이후에 변경 사항이 적용됩니다.

Answer 3

라디오 버튼과 입력 [type = text] 클래스를 사용하기 때문에 라디오 버튼이 모두 변경된 후 $('.' + selectedMarkerClass).length == 2 및 $('.group_1').length == 4입니다.

, 당신의 라디오 버튼을 필터링 "[name=referral_open]",

var selectedMarkerClass = 'was-selected'; 

$('.group_1').change(function() { 
    $(this).addClass(selectedMarkerClass); 

    if ($('.' + selectedMarkerClass).length == $('.group_1[name=referral_open]').length) { 
     $('#2').removeClass('red'); 
    } 
});