Alihkan tombol radio HTML dengan mengklik labelnya

87

Adakah cara sederhana untuk membuat tombol radio beralih - ketika teks di dekatnya diklik - tanpa memasukkan Javascript Framework yang besar ke dalam proyek PHP saya yang kecil?

Formulir web terlihat seperti ini:

<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
sumber

165

Anda juga bisa membungkus elemen Anda tanpa memberi mereka masing-masing ID, karena a <label>secara implisit untuk input yang dikandungnya, seperti ini:

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

— Nick Craver
sumber

4

Hal ini membuat penataan label lebih sulit dan mengharuskan Anda membungkus teks dengan lebih banyak elemen.

— Soviut

3

Ya, tetapi jika Anda tidak menata, akan lebih mudah untuk mendapatkan fungsionalitas yang Anda inginkan. Saya tidak suka harus menambahkan ID tambahan dan atribut "untuk".

— Dr. C. Hilarius

4

+1 ID bisa sangat jahat jadi sebaiknya hindari sebagai aturan umum

— Chris Stephens

1

pembungkus adalah solusi unggul untuk menggunakan iddan fortanpa pembungkus. Alasannya adalah jika label memiliki margin yang lebar dan pengguna mengklik sweet spot di antara kotak centang dan label (seperti yang paling mungkin dilakukan), tidak ada yang terjadi. Biola di sini: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

Anda dapat menggunakan <label>elemen, yang dirancang untuk melakukan hal itu:

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

— Frédéric Hamidi
sumber

1

@Alexander, tentu saja. Hanya Safari versi 2 dan lebih rendah yang tidak mendukungnya.

— Frédéric Hamidi

3

Dan setelah itu Anda dapat menggunakan selektor input#radCreateMode:checked ~ labeluntuk menerapkan gaya ke label. Menerapkan gaya ke label saat pemilihan tidak dimungkinkan jika kita menyarangkan input di dalam label.

— Zuhaib Ali

1

Ini benar-benar harus menjadi jawaban yang diterima, itu cara yang tepat untuk melakukan ini.

— greco.roamin

1

Saya menggunakan Safari v 13 dan metode ini tidak berhasil untuk saya. Tombol radio bisa saja batal dipilih, tapi tidak dipilih. Saya harus membungkus label di sekitar input: <label> <input> teks label saya </label>. Perhatikan bahwa saya tidak menggunakan <form>, atau <fieldset>.

— IAM_AL_X

Pastikan nilai atribut for adalah id yang benar untuk input. Untuk berjaga-jaga jika seseorang melakukan kesalahan yang sama dengan saya.

— Kevin .NET

5

Membungkus masukan di bawah label seharusnya berfungsi.

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

— Jason Ching
sumber

1

Saya mengalami kesulitan menemukan nilai tombol radio menggunakan metode ini, alternatifnya adalah menggunakan area hit yang meningkatkan area yang dapat diklik dari sebuah tombol .

— Christopher Grigg
sumber