Etiketine tıklayarak HTML radyo düğmesini değiştirin

87

Küçük PHP projeme herhangi bir büyük Javascript Çerçevesi eklemeden - yakınındaki bir metin tıklandığında - radyo düğmesi geçişi yapmanın basit bir yolu var mı?

Web formu şuna benzer:

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

165

Ayrıca, öğelerinizi her birine bir kimlik vermeden de sarmalayabilirsiniz , çünkü a <label>örtük olarak içerdiği girdi içindir, örneğin:

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

— Nick Craver
kaynak

4

Bu, etiketin stilini daha zor hale getirir ve metninizi daha da fazla öğeye sarmalamanızı gerektirir.

— Soviut

3

Evet, ancak stil yapmıyorsanız, istediğiniz işlevselliği elde etmenizi kolaylaştırır. Fazladan kimlik ve "for" öznitelikleri eklemekten hoşlanmıyorum.

— Dr. C. Hilarius

4

+1 kimlikler çok kötü olabilir, bu yüzden genel bir kural olarak onlardan kaçınmak en iyisi

— Chris Stephens

1

ambalaj malzemesi kullanıldığında için üstün bir çözüm idve forbir sarma. Bunun nedeni, etiketin geniş bir marjı varsa ve kullanıcı onay kutusu ile etiket arasındaki tatlı noktayı tıklarsa (büyük olasılıkla yaptıkları gibi) hiçbir şey olmaz. Burada keman: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

<label>Tam olarak bunu yapmak için tasarlanmış öğeleri kullanabilirsiniz :

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

— Frédéric Hamidi
kaynak

1

@Alexander, kesinlikle. Yalnızca Safari sürüm 2 ve önceki sürümler bunu desteklemez.

— Frédéric Hamidi

3

Ardından input#radCreateMode:checked ~ label, etikete stil uygulamak için seçiciyi kullanabilirsiniz . Girdiyi etiketin içine yerleştirirsek, seçim üzerine etiketlere stil uygulamak mümkün değildir.

— Zuhaib Ali

1

Bu gerçekten kabul edilen cevap olmalı, bunu yapmanın doğru yolu bu.

— greco.roamin

1

Safari v 13 kullanıyorum ve bu yöntem benim için işe yaramadı. Radyo düğmesinin seçimi kaldırılabilir, ancak seçilemez. Etiketi girdinin etrafına sarmam gerekiyordu: <label> <input> etiket metnim </label>. Bir <form> veya <fieldset> kullanmadığımı unutmayın.

— IAM_AL_X

For özniteliğinin değerinin, giriş için doğru kimlik olduğundan emin olun. Birisi benimle aynı hatayı yaparsa diye.

— Kevin .NET

5

Girişi etiketin altına sarmak işe yaramalıdır.

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

— Jason Ching
kaynak

1

Bu yöntemi kullanarak radyo düğmesinin değerini bulmakta sorun yaşadım, bir alternatif, bir düğmenin tıklanabilir alanını artıran bir vuruş alanı kullanmaktır .

— Christopher Grigg
kaynak