Làm thế nào để tạo một hộp kiểm với nhãn có thể nhấp?

Làm cách nào tôi có thể tạo hộp kiểm HTML với nhãn có thể nhấp (điều này có nghĩa là nhấp vào nhãn sẽ bật / tắt hộp kiểm)?

Cách 1: Bọc nhãn thẻ

Gói hộp kiểm trong labelthẻ:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Phương pháp 2: Sử dụng forthuộc tính

Sử dụng forthuộc tính (khớp với hộp kiểm id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

LƯU Ý : ID phải là duy nhất trên trang!

Giải trình

Vì các câu trả lời khác không đề cập đến nó, một nhãn có thể bao gồm tối đa 1 đầu vào và bỏ qua forthuộc tính và nó sẽ được giả định rằng nó dành cho đầu vào bên trong nó.

Trích từ w3.org (với sự nhấn mạnh của tôi):

[Thuộc tính for] liên kết rõ ràng nhãn được xác định với điều khiển khác. Khi có mặt, giá trị của thuộc tính này phải giống với giá trị của thuộc tính id của một số điều khiển khác trong cùng một tài liệu. Khi vắng mặt, nhãn được xác định được liên kết với nội dung của phần tử.

Để liên kết nhãn với điều khiển khác một cách ngầm định, phần tử điều khiển phải nằm trong nội dung của phần tử LABEL . Trong trường hợp này, LABEL chỉ có thể chứa một yếu tố kiểm soát. Nhãn có thể được định vị trước hoặc sau điều khiển liên quan.

Sử dụng phương pháp này có một số lợi thế hơn for:

• Không cần chỉ định một idcho mỗi hộp kiểm (tuyệt vời!).

• Không cần sử dụng thuộc tính phụ trong <label>.

• Vùng có thể nhấp của đầu vào cũng là vùng có thể nhấp của nhãn, do đó, không có hai vị trí riêng biệt để nhấp có thể kiểm soát hộp kiểm - chỉ có một, bất kể <input>văn bản nhãn thực tế và cách nhau bao xa và cho dù bạn thuộc loại CSS nào áp dụng cho nó.

Bản demo với một số CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

Chỉ cần chắc chắn rằng nhãn được liên kết với đầu vào.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

Bạn cũng có thể sử dụng các yếu tố giả CSS để chọn và hiển thị nhãn từ tất cả các thuộc tính giá trị của hộp kiểm tra (tương ứng).
Chỉnh sửa: Điều này sẽ chỉ hoạt động với webkit và các trình duyệt dựa trên nhấp nháy (Chrome (ium), Safari, Opera ....) và do đó hầu hết các trình duyệt di động. Không có hỗ trợ Firefox hay IE ở đây.
Điều này chỉ có thể hữu ích khi nhúng webkit / nháy vào ứng dụng của bạn.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Tất cả các nhãn yếu tố giả sẽ có thể nhấp được.

Bản trình diễn: http://codepen.io/mrmoje/pen/oteLl , + Ý chính của nó

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

Nó cũng hoạt động:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

Điều này sẽ giúp bạn: W3Schools - Nhãn

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Sử dụng labelphần tử và forthuộc tính để liên kết nó với hộp kiểm:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

Trong nhãn vật liệu góc với hộp kiểm

<mat-checkbox>Check me!</mat-checkbox>

Dùng cái này

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});