Kiểm tra nút radio khi nhấp vào DIV

Question

Tôi đang viết một ứng dụng bài kiểm tra bằng cách sử dụng php/jquery. Các lựa chọn câu trả lời được chứa như sau:

<ul id="answers"> 
    <li> 
     <div> 
     <input type='radio' name='answer_id' value='313'> True 
     </div> 
    </li> 
    <li> 
     <div> 
     <input type='radio' name='answer_id' value='314'> False 
     </div> 
    </li> 
</ul> 

Sau khi được định dạng w/css, các câu trả lời này xuất hiện trong một vùng chứa có một câu trả lời trên mỗi dòng. Mỗi câu trả lời đều có hộp riêng trong hộp chứa. Tôi muốn người dùng có thể nhấp vào bất kỳ nơi nào trong div câu trả lời riêng lẻ và chọn radio chọn trở thành kiểm tra.

Làm cách nào để kích hoạt nút radio khi người dùng nhấp vào div vùng chứa của nút radio, sử dụng jquery?

Answer 1

Thay vì sử dụng jQuery, tất cả điều này có thể được thực hiện trong HTML gốc bằng cách sử dụng phần tử <label>. Here is a sample hoạt động.

<ul id="answers"> 
     <li> 
       <label> 
        <input type='radio' name='answer_id' value='313'> True 
       </label> 
     </li> 
     <li> 
       <label> 
        <input type='radio' name='answer_id' value='314'> False 
       </label> 
     </li> 
</ul> 

Answer 2

có lẽ cái gì đó như:

$('#answers li div').click(function(){ 

    var r = $(this).find('input[type=radio]'); 
    if($(r).is(":checked")) 
    { 
    $(r).attr("checked", ""); 
    } 
    else 
    { 
    $(r).attr("checked", "checked"); 
    } 

}); 

Answer 3

chỉnh việc sử dụng thẻ nhãn là:

<input type="checkbox" id="checkme" name="checkme" /> <label for="checkme">Toggle this checkbox on/off</label> 

cho = "..." luôn luôn làm cho tham chiếu đến id của đầu vào.

Answer 4

Tôi đồng ý với tj111, nhưng nếu không phải lúc nào cũng phù hợp với:

• Khó khăn hơn để phong cách.
• nhãn chỉ làm việc nếu có văn bản trong họ (nhờ Michael)

Đây là mã thay thế sử dụng div và jQuery:

$('input:radio').click(ev){ 
    ev.stopPropagation(); 
}).parent().click(function(ev){ 
    ev.preventDefault(); 
    $(this).children('input').click(); 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

Với lớp "hoạt động" bây giờ bạn thậm chí có thể che giấu radio và sử dụng bảng định kiểu để làm nổi bật.