Mengklik teks untuk memilih tombol radio yang sesuai

87

Saya membuat aplikasi web kuis menggunakan PHP. Setiap pertanyaan terdiri dari pertanyaan yang terpisah <label>dan memiliki 4 kemungkinan pilihan, yang digunakan radio buttonsuntuk memungkinkan pengguna memilih jawabannya. HTML saat ini untuk satu pertanyaan terlihat seperti:

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

Saya ingin pengguna memiliki opsi untuk mengklik teks yang terkait dengan tombol radio. Saat ini, pengguna hanya dapat mengklik tombol radio itu sendiri - yang menurut saya merupakan tugas yang cukup rumit.

Saya membaca Tidak dapat memilih pilihan tombol radio tertentu dengan mengklik teks pilihan dan poin saran untuk membuat atribut fordan idtag cocok. Saya telah melakukan ini dan masih tidak berhasil.

Pertanyaan saya adalah: Saya ingin dapat mengklik teks suatu <input type="radio">objek, bukan hanya dapat memilih tombol radio itu sendiri. Saya tahu saya telah membaca tentang ini sebelumnya tetapi sepertinya tidak dapat menemukan solusi apa pun untuk masalah saya. Setiap bantuan atau saran sangat dihargai!

html css forms input radio-button Berlimpah10
sumber

Jawaban:

177

Di kode Anda, Anda memiliki label di formulir itu sendiri. Anda ingin memberi label pada setiap grup radio, seperti yang ditunjukkan di bawah ini.

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">
  <label for="349">Abe</label>
  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">
  <label for="351">Andre</label>
  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form>
Luaskan cuplikan

Anda harus ingat bahwa dua elemen tidak boleh memiliki ID yang sama. The nameatribut digunakan sehingga tombol radio berfungsi sebagai sebuah kelompok dan hanya memungkinkan pilihan pada satu waktu.

Nathan
sumber
7
Sangat sederhana. Senang ketika fitur tag yang hampir tersembunyi ditemukan kembali
The Thirsty Ape
38

Tampaknya ada sedikit spasi yang tidak bisa diklik antara tombol radio dan label jika dilakukan sesuai dengan jawaban Nathan . Berikut adalah cara membuat mereka bergabung dengan mulus (lihat artikel ini ):

<form>
    <p>What is my middle name?</p>
    <br>
    <label><input id="349" type="radio" value="1" name="question1">Abe</label>
    <br>
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label>
    <br>
    <label><input id="351" type="radio" value="3" name="question1">Andre</label>
    <br>
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label>
    <br>
</form>
pengguna21820
sumber
2
Saya lebih suka jawaban ini. Tapi apakah Anda yakin Anda membutuhkan atribut "untuk" dengan pendekatan ini?
Piddu
@Piddu: Saya pikir Anda benar, jadi saya telah memperbarui jawaban saya. Terima kasih!
pengguna21820
Pilihan lain untuk menghindari spasi ekstra antara tombol radio dan label, adalah dengan tidak meletakkannya di sana <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(tidak ada spasi atau baris baru di antara tag)
Arye Eidelman
1
Saya baru saja menguji cara saya di chrome dan firefox dan menemukan bahwa itu mengurangi ruang yang tidak dapat diklik dari 7 menjadi 3 piksel dengan menghapus karakter spasi. lihat why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements . tiga piksel yang tersisa adalah margin kanan default pada tombol radio margin: 3px 3px 0 5px;(ini lebih terlihat di firefox karena ada efek hover secara default) yang dapat diperbaiki dengan CSS dengan menghapus margin dan menggantinya dengan padding.
Arye Eidelman
1
@AryeDovEidelman: Begitu, terima kasih telah menyelidikinya! Meskipun untuk kesederhanaan saya akan tetap membungkus semuanya di label. =)
user21820
1

Tag label harus berada di sekitar setiap jawaban, misalnya di sekitar Abe, Andrew, dll ... dan harus unik untuk masing-masing jawaban.

endyourif
sumber
1

Menumpuk tag masukan di dalam tag label memastikan label muncul tepat di sebelah tombol radio. Dengan pendekatan sebelumnya yang disarankan, Anda dapat meletakkan tag label di mana saja dalam file html dan itu akan memilih tombol radio terkait saat diklik. Lihat ini:

<html>
<body>

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">

  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">

  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form><br/>
<p>This is a paragraph</p>
  <label for="349">Abe</label><br/>
  <label for="351">Andre</label>
  
</body>
</html>
Luaskan cuplikan

Melakukannya dengan cara ini malah menghilangkan kekurangan ini:

<form>
  <p>What is my middle name?</p>
  <br>
  
  <label>
    <input id="349" type="radio" value="1" name="question1"/>Abe
  </label>
  <br>
  
  <label>
    <input id="350" type="radio" value="2" name="question1"/>Andrew
  </label>
  <br>
  
  <label>
    <input id="351" type="radio" value="3" name="question1"/>Andre
  </label>
  <br>
  
  <label>
    <input id="352" type="radio" value="4" name="question1"/>Anderson
  </label>
  <br>
</form>
Luaskan cuplikan

Neo
sumber
0

Anda bisa melakukannya seperti ini

 <label for="1">hi</label>
 <input type="radio" id="1" />

Jadi jika Anda mengklik teks atau label itu memilih tombol radio. Tetapi jika Anda melakukan ini ...

<label for="1">//</label>

dan Anda menambahkan ini ke kode apa yang saya tulis sebelum ini maka jika Anda mengklik label ke-2 maka itu juga akan memilih radio.

JuicY_Burrito
sumber
0

Saya telah melakukan ini selama bertahun-tahun, tetapi tidak satu pun dari ini berhasil untuk saya, menggunakan variabel.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

dan inilah sumbernya:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />
Gymus
sumber