Nhấp vào văn bản để chọn nút radio tương ứng

Tôi đang tạo một ứng dụng web bài kiểm tra bằng PHP. Mỗi câu hỏi bao gồm <label> riêng biệt và có 4 lựa chọn có thể, sử dụng radio buttons để cho phép người dùng chọn câu trả lời của mình. HTML hiện hành đối với một câu hỏi duy nhất trông giống như:Nhấp vào văn bản để chọn nút radio tương ứng

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

tôi muốn người dùng có tùy chọn nhấp vào văn bản liên quan đến nút radio. Ngay bây giờ, người dùng chỉ có thể nhấp vào nút radio - điều mà tôi thấy là một nhiệm vụ khá cồng kềnh.

Tôi đã đọc Unable to select a particular radio button choice by clicking on the choice text và đề xuất trỏ tới việc tạo thuộc tính for và id của các thẻ khớp. Tôi đã làm điều này và nó vẫn không hoạt động.

Câu hỏi của tôi là: Tôi muốn có thể nhấp vào văn bản của đối tượng <input type="radio">, thay vì chỉ có thể chọn nút radio. Tôi biết tôi đã đọc về điều này trước đây nhưng dường như không tìm thấy giải pháp nào cho vấn đề của tôi. Bất kỳ trợ giúp hoặc đề xuất được nhiều đánh giá cao!

Nguồn

2011-10-22 Abundnce10

136

Trong mã của bạn, bạn đã có nhãn trên biểu mẫu. Bạn muốn đặt nhãn trên từng nhóm radio riêng lẻ, như được hiển thị bên dưới.

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

Bạn nên ghi nhớ rằng hai yếu tố không bao giờ nên có cùng một ID. Thuộc tính name được sử dụng để các nút radio hoạt động như một nhóm và chỉ cho phép một lựa chọn duy nhất tại một thời điểm.

Nguồn

2011-10-22 23:23:20 Nathan

xuất sắc đơn giản. Yêu thích nó khi một tính năng gần như ẩn của thẻ được tái khám phá – foochow

Thẻ nhãn nên nằm xung quanh mỗi câu trả lời, ví dụ: xung quanh Abe, Andrew, vv ... và nó cần phải là duy nhất cho mỗi người trong số họ.

Nguồn

2011-10-22 23:24:04 endyourif

Có vẻ như có một chút không gian không thể nhấp giữa nút radio và nhãn nếu được thực hiện theo câu trả lời của Nathan. Dưới đây là làm thế nào để làm cho họ tham gia liên tục (xem this article):

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

Nguồn

2015-12-14 12:27:51 user21820

Tôi thích câu trả lời này. Nhưng bạn có chắc chắn bạn thậm chí cần các thuộc tính "cho" với cách tiếp cận này? – Piddu

@Piddu: Tôi nghĩ bạn đúng, vì vậy tôi đã cập nhật câu trả lời của mình. Cảm ơn! – user21820

Bạn có thể làm điều đó như thế này

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

Vì vậy, nếu bạn click vào văn bản hoặc dán nhãn nó chọn nút radio. Nhưng nếu bạn làm điều này ...

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

và bạn thêm video này vào những gì mã tôi đã viết ngay trước này sau đó nếu bạn click vào nhãn 2 thì nó cũng sẽ chọn radio.

Nguồn

2016-10-10 01:19:08

Làm tổ thẻ đầu vào trong thẻ nhãn đảm bảo nhãn xuất hiện ngay bên cạnh nút radio. Với các phương pháp tiếp cận trước đó được đề xuất, bạn có thể đặt thẻ nhãn ở bất kỳ đâu trong tệp html và nó sẽ chọn nút radio được liên kết khi được nhấp.Check this out:

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

Làm theo cách này thay vì loại bỏ lỗ hổng này:

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

Nguồn

2017-10-14 13:52:38 Neo

Nhấp vào văn bản để chọn nút radio tương ứng

Trả lời

Các vấn đề liên quan