Chuyển đổi nút radio HTML bằng cách nhấp vào nhãn của nó

87

Có cách nào đơn giản để làm cho một nút radio bật tắt - khi một văn bản gần nó được nhấp vào - mà không giới thiệu bất kỳ Khung Javascript lớn nào vào dự án PHP smal của tôi không?

Biểu mẫu web trông như thế này:

<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

— Alexander Farber
nguồn

164

Bạn cũng có thể bao bọc các phần tử của mình mà không cần cung cấp cho mỗi phần tử một ID, vì a <label>là ngầm định cho đầu vào mà nó chứa, như sau:

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

— Nick Craver
nguồn

4

Điều này làm cho việc tạo kiểu cho nhãn trở nên khó khăn hơn và đòi hỏi bạn phải bọc văn bản của mình bằng nhiều phần tử hơn.

— Soviut

2

Có, nhưng nếu bạn không tạo kiểu, thì việc có được chức năng bạn muốn dễ dàng hơn. Tôi không muốn phải thêm ID bổ sung và thuộc tính "cho".

— Tiến sĩ C. Hilarius

4

1 ID có thể rất ác vì vậy tốt nhất để tránh chúng như là một nguyên tắc chung

— Chris Stephens

gói là một giải pháp ưu việt để sử dụng idvà forkhông cần gói. Lý do là nếu nhãn có lề rộng và người dùng tình cờ nhấp vào vị trí ngọt ngào giữa hộp kiểm và nhãn (như họ thường làm nhất) thì sẽ không có gì xảy ra. Fiddle đây: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

Bạn có thể sử dụng <label>các phần tử được thiết kế để làm chính xác điều đó:

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

— Frédéric Hamidi
nguồn

1

@Alexander, hoàn toàn có thể. Chỉ Safari phiên bản 2 trở xuống không hỗ trợ nó.

— Frédéric Hamidi

3

Và sau đó, bạn có thể sử dụng bộ chọn input#radCreateMode:checked ~ labelđể áp dụng các kiểu cho nhãn. Không thể áp dụng kiểu cho các nhãn khi lựa chọn nếu chúng ta lồng đầu vào bên trong nhãn.

— Zuhaib Ali

1

Đây thực sự nên là câu trả lời được chấp nhận, đó là cách thích hợp để làm điều này.

— greco.roamin

1

Tôi đang sử dụng Safari v 13 và phương pháp này không hoạt động với tôi. Có thể bỏ chọn nút radio nhưng không được chọn. Tôi phải quấn nhãn xung quanh đầu vào: <label> <input> văn bản nhãn của tôi </label>. Lưu ý rằng tôi không sử dụng <biểu mẫu>, cũng không phải <tập trường>.

— IAM_AL_X

Đảm bảo giá trị thuộc tính for là id chính xác cho đầu vào. Đề phòng nếu ai đó mắc phải sai lầm như tôi.

— Kevin .NET

5

Bao bọc đầu vào dưới nhãn sẽ hoạt động.

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

— Jason Ching
nguồn

1

Tôi đã gặp sự cố khi tìm giá trị của nút radio bằng phương pháp này, một giải pháp thay thế là sử dụng vùng nhấn tăng diện tích có thể nhấp của nút .

— Christopher Grigg
nguồn