레이블을 클릭하여 HTML 라디오 버튼을 전환합니다.

87

작은 PHP 프로젝트에 큰 Javascript Framework를 도입하지 않고 라디오 버튼 토글을 만드는 간단한 방법이 있습니까?-근처의 텍스트를 클릭했을 때-

웹 양식은 다음과 같습니다.

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

— 알렉산더 파버
소스

165

a 는 다음과 같이 포함 된 입력을 암시 적으로 나타 내기 때문에 각 요소 에 ID 를 제공 하지 않고 요소 를 래핑 할 수도 있습니다 <label>.

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— 닉 크 레버
소스

4

이로 인해 레이블 스타일링이 더 어려워지고 더 많은 요소로 텍스트를 래핑해야합니다.

— Soviut

3

예,하지만 스타일을 지정하지 않는 경우 원하는 기능을 더 쉽게 얻을 수 있습니다. 나는 여분의 ID와 "for"속성을 추가하는 것을 좋아하지 않는다.

— Dr. C. Hilarius

4

+1 ID는 매우 사악 할 수 있으므로 일반적으로 피하는 것이 가장 좋습니다

— Chris Stephens

1

포장에 사용 우수한 해결책 id및 for포장 불가로. 그 이유는 레이블에 넓은 여백이 있고 사용자가 확인란과 레이블 사이의 스위트 스팟을 클릭하면 (가장 가능성이 높기 때문에) 아무 일도 일어나지 않기 때문입니다. 여기에 바이올린 : jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

<label>정확히 그렇게하도록 설계된 요소 를 사용할 수 있습니다 .

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— 프레데릭 하 미디
소스

1

@Alexander, 절대적으로. Safari 버전 2 이하 만 지원하지 않습니다.

— Frédéric Hamidi

3

그런 다음 선택기 input#radCreateMode:checked ~ label를 사용 하여 레이블에 스타일을 적용 할 수 있습니다 . 레이블 내부에 입력을 중첩하면 선택시 레이블에 스타일을 적용 할 수 없습니다.

— Zuhaib Ali

1

이것은 정말로 받아 들여지는 대답이어야하며 이것을 수행하는 적절한 방법입니다.

— greco.roamin

1

Safari v 13을 사용하고 있는데이 방법이 효과가 없었습니다. 라디오 버튼은 선택 취소 할 수 있지만 선택할 수는 없습니다. 입력을 <label> <input> my label text </ label>로 감싸 야했습니다. 저는 <form>이나 <fieldset>을 사용하지 않습니다.

— IAM_AL_X

for 속성 값이 입력에 대한 올바른 ID인지 확인하십시오. 누군가 나와 같은 실수를했다면

— Kevin .NET

5

레이블 아래에 입력을 래핑하면 작동합니다.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— 제이슨 칭
소스

1

이 방법을 사용하여 라디오 버튼의 값을 찾는 데 어려움이있었습니다. 대안은 히트 영역을 사용 하여 버튼의 클릭 가능한 영역을 늘리는 것 입니다.

— 크리스토퍼 그 리그
소스