jquery를 사용하여 라디오 버튼을 선택하면 입력 필드를 표시하는 방법

Question

"기타"라는 라디오 버튼이 있습니다.이 옵션을 선택하면 "기타 텍스트"라는 입력 필드가 나타납니다. 그것은 매우 간단하지만 나는 아침마다 실패했습니다. 실패의

jQuery(function(){ 
    jQuery("input[name=other]").change(function(){   


     if ($(this).val() == "Yes") { 
     jQuery("#other-text").show() 
     } 
     else { 
     jQuery("#other-text").hide(); 
     }                
    }); 
}); 

JSFiddle :

<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes"><b>Other</b><br /> 
<input type="text" name="other-text" id="other-text" style="display:none" /> 

여기 내 자바 스크립트입니다. http://jsfiddle.net/Wpt3Y/532/

Answer 1

이

jQuery("#other-radio").change(function(){... 

Answer 2

name 속성이 두 번째 radio 버튼에 있기 때문에 코드가 작동하지 않습니다.

사용이 :

<input type="radio" name="other" id="other-radio" value="Yes"> 

제거 name="ocalls" 속성.

Answer 3

나는이 방법을 제안한다. prop()을 사용하려고하지만 jquery

jQuery("input:radio[name='ocalls']").change(function(){           
      if ($(this).attr("checked") == true) { 
       jQuery("#other-text").show(); 
      } 
      else { 
       jQuery("#other-text").hide(); 
      }                
     }); 

example with radio

의 이전 버전을 사용하여 실현 대신 당신은 체크 박스를 사용할 수 있습니다

HTML

<input name="ocalls" type="checkbox" name="other" id="other-radio" value="Yes"><b>Other</b><br /> 
<input type="text" name="other-text" id="other-text" style="display:none" /> 

JS

을

jQuery("input:checkbox[name='ocalls']").change(function(){        
      if ($(this).attr("checked") == true) { 
       jQuery("#other-text").show(); 
      } 
      else { 
       jQuery("#other-text").hide(); 
      }                
     }); 

example with checkbox

Answer 4

은 그냥 jsfiddle을 업데이트 작동 : http://jsfiddle.net/Wpt3Y/539/

<pre><input type="radio" name="other" id="other-radio" value="Yes"><b>Other</b></pre> 

귀하의 코드가 작동, 당신은 단순히 두 개의 이름 속성을 가지고, 라디오 입력을 잘못 입력.

Answer 5

<form> 
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes"> 
    <b>Other</b><br /> 
</input> 

<input type="text" name="other-text" id="other-text" style="display: none;" />   
</form> 

jQuery(function(){ 
     jQuery("#other-radio").change(function(){   

      if ($(this).val() == "Yes") { 
      jQuery("#other-text").show() 
      } 
      else { 
      jQuery("#other-text").hide(); 
      }                
     }); 
}); 

시도해보십시오.

Answer 6

토글 효과를 사용하려면이 코드를 확인란과 함께 사용할 수 있습니다. 이 답변이 downvote있어 왜

jQuery(function(){ 
    jQuery("input[name=ocalls]").change(function(){      
     if($(this).attr("checked")) 
     { 
      $("#other-text").show(); 
     } 
     else 
     { 
      $("#other-text").hide(); 
     } 
    }); 
});