2011-01-09 2 views
4

저는 Google에서이 솔루션을 찾기 위해 고심하고 있습니다. 어쩌면 내가 잘못 찾고 있는데 StackOverflow의 신뢰할 수있는 멤버에게 물어볼 것이라고 생각했습니다.버튼을 사용하여 HTML 체크 박스를 확인하십시오.

html 버튼을 사용하여 html 확인란을 선택하고 싶습니다. 내가 사용하고있는 응용 프로그램이 터미널에있을 것이고 터치 스크린을 통해 HTML 체크 상자가 너무 작아서 사용되기 때문에이 확인란을 사용하기를 원하지 않는 이유는 접근성을위한 이유 일뿐입니다.

유일한 문제는 SQL 쿼리를 사용하여 채워지는 확인란의 목록이 동적이라는 것입니다. 분명히 그러나 나는 HTML 버튼을 만들기 위해 똑같이 할 수있다.

Im이 기능을 수행하려면 JavaScript가 필요합니다 (이 응용 프로그램에서 필요한 많은 기능을 찾으면 매우 유용합니다).

명확하게하기 : 단추를 클릭하고 "Fin Rot"값이 있고 "Fin Rot"값이있는 확인란을 선택한다고 말하고 싶습니다. 그리고 다른 버튼을 클릭하면 값이 "Ich"라고 말하면서 "Ich"값을 가진 체크 박스를 확인합니다.

답변

10

버튼과 자바 스크립트를 사용할 수 있지만 훨씬 간단한 접근법? 그냥 예를 들어, 버튼 같은 이것에 대한 단지 설계 <label> 및 스타일을 사용

<input type="checkbox" id="finRot" name="something" value="Fin Rot"> 
<label for="finRot">Some text here, could be "Fin Rot"</label> 

또는 (당신은 labelcheckboxidfor를 사용하지 않는 경우) :

<label> 
    <input type="checkbox" name="something" value="Fin Rot"> 
    Some text here, could be "Fin Rot" 
</label> 

.... 그런 다음 CSS를 사용하면 필요에 따라 확인란을 숨길 수 있지만 확인란을 클릭하여 전환 할 수 있습니다.

You can test out a demo here 또한 필요한 경우 레이블에 버튼 모양의 CSS가 표시됩니다.

+0

+1 내가 게시 한 JS 기반 솔루션보다 훨씬 낫다. – Paul

+0

@Felix - 아니요, 'for' 속성 조각입니다 ... 넷스케이프 이후로 작동합니다 :) –

+0

@Felix : it 'for'속성의 값이 관련 'input'요소의 'id'와 정확히 일치하는 한 Chrome (8.x, Ubuntu 10.10)에서 작동합니다. –

2

이 예제에서는 버튼을 사용하여 체크 박스를 설정/해제합니다.

<input type="checkbox" id="finRot" name="something" value="Fin Rot"> 
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button> 
2

어떻게 HTML 솔루션에 대한

http://jsfiddle.net/DnEL3/

.

<p><input type="checkbox" 
value="Another check box" 
name="cboxwithlabel" id="idbox"><label 
for="idbox">Another 
checkbox</label></p> 

< label> 확인란이나 라디오 버튼의 레이블을 만듭니다.

+1

아니면 실제로 다른 모든 input (및 textarea) 요소 ... =) –

관련 문제