다른 확인란을 선택하면 입력란이 숨김

Question

"기타"옵션이 선택된 경우에만 표시되는 입력 필드가 있습니다. "기타"확인란의 선택을 취소하면 입력 필드가 희미 해 지지만 "기타"확인란을 선택 취소하는 대신 동일한 그룹의 다른 확인란을 선택하면 입력 필드가 사라지게됩니다. 따라서 '기타'입력란을 선택하지 않으면 '기타'입력란을 볼 수 없습니다. 부분적으로 작동하는 자바 스크립트가 있지만 다른 확인란을 선택하면 "기타"입력 필드가 계속 표시됩니다.

HTML

<input type="checkbox" id="residence_check" name="found"/> 
<label for="residence_check"> 
    Residence 
</label> 
<input type="checkbox" id="tradeshow_check" name="found"/> 
<label for="tradeshow_check"> 
    Tradeshow 
</label> 
<input type="checkbox" id="office_check" name="found"/> 
<label for="office_check"> 
    Office Building 
</label> 
<input type="checkbox" id="check_other" value="found_other" name="found"/> 
    <label for="check_other"> 
    Other 
</label> 
<input type="text" id="check_input" placeholder="Other"/> 

자바 스크립트 내가 사용 사례에서 수집 무엇부터

$('#check_other').change(function() { 
    if($(this).is(":checked")) { 
     $('#check_input').fadeIn(); 
    } else { 
     $('#check_input').fadeOut('fast'); 
      } 
}); 

Answer 1

당신이 체크 박스하지만, 라디오 버튼을 사용하지 않는다는 것입니다. 당신이 체크 박스를하고자 할 경우

http://jsfiddle.net/AeP58/1/

$('input[type=radio]').on('change', function() { //event on all radio buttons 
    if($(this).attr('id') == 'check_other' && $(this).prop('checked')) { 
     $('#check_input').fadeIn(); 
    } else { 
     $('#check_input').fadeOut('fast'); 
    } 
}); 

, 당신은 코드를 조금 변경하고 아마 당신이 원하는 것을 얻을 수있다 : 이런 경우, 이것은 당신이 원하는 것을 구현하는 좋은 방법이 될 것입니다.

Answer 2

당신은 당신이 시도 할 수 체크 박스와 재미를 원한다면이 당신을 위해 작동

function showHideOtherInput() { 
console.log($(this)[0]==$('#check_other')[0]); 
     var shouldShow=$('[id$="_check"]:checked').length===0 && $('#check_other').prop('checked'); 
     console.log(shouldShow); 
    if(shouldShow) { 
     $('#check_input').fadeIn(); 
    } else { 
     $('#check_input').fadeOut('fast'); 
      } 
} 
$('#check_input').hide(); //since nothing is selected at this point just hide the input 
$('#check_other').change(showHideOtherInput); 
//for each XXXX_check checkbox trigger the show or hide function 
$('[id$="_check"]').each(function(ix,el){$(el).change(showHideOtherInput)}); 

희망을. :)