Nút phát thanh giao diện người dùng ngữ nghĩa không kiểm tra khi nhấp vào nhãn

Question

Như tiêu đề cho biết, các nút radio không kiểm tra khi nhãn (tex) được nhấp. Tuy nhiên điều này dường như làm việc tốt trên trang web của Semantic.

Tài liệu Semantic UI với nút radio làm việc: http://semantic-ui.com/modules/checkbox.html

Đoạn mã ví dụ sau đây là trực tiếp từ tài liệu UI Semantic trên:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="ui form"> 
 
    <div class="grouped fields"> 
 
    <label>How often do you use checkboxes?</label> 
 
    <div class="field"> 
 
     <div class="ui radio checkbox"> 
 
     <input type="radio" name="example2" checked="checked"> 
 
     <label>Once a week</label> 
 
     </div> 
 
    </div> 
 
    <div class="field"> 
 
     <div class="ui radio checkbox"> 
 
     <input type="radio" name="example2"> 
 
     <label>2-3 times a week</label> 
 
     </div> 
 
    </div> 
 
    <div class="field"> 
 
     <div class="ui radio checkbox"> 
 
     <input type="radio" name="example2"> 
 
     <label>Once a day</label> 
 
     </div> 
 
    </div> 
 
    <div class="field"> 
 
     <div class="ui radio checkbox"> 
 
     <input type="radio" name="example2"> 
 
     <label>Twice a day</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Làm thế nào tôi có thể sửa lỗi này?

Chỉnh sửa: Rõ ràng tôi cần một số javascript cho các nút radio như được đề cập ở đây: http://semantic-ui.com/modules/checkbox.html#/usage. Tuy nhiên, tôi gặp sự cố khi tìm mã yêu cầu tối thiểu cho hộp/nút radio hoạt động.

Answer 1

Tôi cần $('.ui.checkbox').checkbox(); trong Javascript của mình.

Answer 2

Nếu bạn muốn kiểm tra radio buttons nhấp nhãn, bạn phải sử dụng id cho input lĩnh vực và for cho label:

<div class="ui form"> 
    <div class="grouped fields"> 
    <label>How often do you use checkboxes?</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="example2" checked="checked" id="100"> 
     <label for="100">Once a week</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="example2" id="101"> 
     <label for="101">2-3 times a week</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="example2" id="102"> 
     <label for="102">Once a day</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="example2" id="103"> 
     <label for="103">Twice a day</label> 
     </div> 
    </div> 
    </div> 
</div> 

jsfiddle-link

tất nhiên, bạn có thể sử dụng riêng của bạn id và for tên, nhưng tất cả các giá trị phải là duy nhất!

Answer 3

Dường như kiểu được áp dụng cho các nhãn 'nhãn' gây ra sự cố. Bạn có thể xóa hộp kiểm 'radio' của lớp 'và di chuyển thẻ nhập vào trong nhãn nhãn và thử, nó hoạt động như mong muốn. nếu bạn muốn chức năng này, hãy thử ghi đè lớp này với lớp tùy chỉnh của bạn.

Answer 4

Hơi trễ một chút cho câu trả lời này nhưng tôi đã sửa nó một cách dễ dàng nhất.

Add value = "true" vào hộp kiểm đầu vào của bạn như sau:

Giá trị sẽ chỉ được gửi đến máy chủ nếu nó kiểm tra.