라디오 버튼 선택

라디오 버튼을 클릭 할 때 텍스트 필드를 거의 표시하지 않으려면 어떻게해야합니까? JavaScript 또는 AJAX없이.라디오 버튼 선택

출처

2009-12-30 sarah

이 경우 JavaScript를 사용해야합니다.

출처

2009-12-30 05:16:48

다른 가고있다 is'nt? – sarah

아니, 나는 두렵다. 왜, 너 자신을 제한하는거야? 숙제에 다소 어려움이 있습니까? –

자바 스크립트를 사용해서는 안되는 모바일 앱을 만들고 있습니다. – sarah

일 (나는 그것을 시도하지는 않았지만 조사 할 것이 있습니다)는 CSS 외에도 CSS에서 :focus pseudo class을 사용하는 것입니다. 그것이 작동하더라도 아마 크로스 브라우저가 아니지만 특정 모바일 플랫폼을 대상으로하고 있기 때문에 괜찮을 것입니다. 경우

<style> 
    #bar { display:none; } 
    #foo:selected #bar { display:block; }   
</style> 

<input type="radio" id="foo"> 
<label for="foo"><div id="bar">Stuff goes here</div></label>

가 나도 몰라 : 그것은 다음과 같이 작동합니다 초점은 또한 양식 요소의 관련 라벨을 적용하지만, 그것은 확실히 요소의 레이블을 클릭하면 양식의 "클릭"이벤트를 활성화 않는 것을 고려하고 있습니다 요소 그것은 라벨.

어쨌든 시도해보십시오. 모바일 Safari를 타겟팅하는 경우 이러한 종류의 셀렉터를 잘 지원해야합니다.

출처

2009-12-30 05:46:24 jpsimons

왜'#foo : focus + label {display : block; } ' –

동일한 것을 재현 할 수 없습니다. 선택란에 라디오 버튼이 있습니다. 텍스트 필드를 표시해야합니다. – sarah

예, psudo 클래스 선택기로 이것을 할 수 있습니까? 그렇지만 확실히 크로스 브라우저에서는 작동하지 않습니다. 당신은 확인할 수 있습니다

http://www.quirksmode.org/css/contents.html

을하는 브라우저 지원 무엇 선택기의 목록. IE 7 이하는 : 포커스 선택기를 지원하지 않습니다. 원하는대로 대략 수행 할 수 있지만 : 호버 (호버에만 표시하는 것을 원하지 않는다고 생각 하긴하지만).

다음의 예는 (3.5) 파이어 폭스에서 작동 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
<style> 
input { float: left; } 

/* Make the text hidden when the page loads */ 
.text_to_show { display:none; } 

/* This style affects element which immediately follows the focused class */  
.trigger:focus + div.text_to_show { display: inline; }  

</style> 
</head> 
<body> 

<input type="radio" name="radio" class="trigger" /> 
<div class="text_to_show">This text is tied to the first radio button.</div> 

<input type="radio" name="radio" class="trigger" /> 
<div class="text_to_show">This text is tied to the 2nd radio button</div> 


</body> 
</html>

출처

2009-12-30 09:32:36 Erik

라디오 버튼 선택

답변

관련 문제