hộp kiểm được chọn khi nhấp vào nhãn được liên kết

Question

Tôi có checkbox và mô tả hộp kiểm trong label. Tôi muốn check Hộp kiểm khi nhãn được nhấp.
Đánh dấu:

<input id="Checkbox1" type="checkbox" /></div> 
<label id="lblAssociateWithCheckBox" title="Check"></label> 

Trong JQuery tôi cố gắng:

$(document).ready(function() { 
      CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1')); 
      function CheckCheckBox(lblID, chkID) { 
       $('#' + lblID).live("click", function() { 
        return $('#' + Checkbox1).attr('checked', 'checked'); 
       }); 
      } 
     }); 

nhưng nó không work.I có một lỗi trong firebug.

uncaught exception: Syntax error, unrecognized expression: #[object Object]

sai lầm của tôi là gì? Nếu đây không phải là một cách thích hợp để làm điều này đề nghị cách khác.Thanks.

Answer 1

Cập nhật: Chỉ xem nhận xét của bạn dưới câu trả lời của Pavan về việc muốn sử dụng các phần tử không phải nhãn như nhãn, ví dụ: các phần tử nhịp. Câu trả lời đầu tiên của tôi là lý do tại sao? Nhưng nếu bạn thực sự muốn bạn có thể làm điều này một cách dễ dàng mà không cần phải viết nhiều mã và mã hóa nhiều id phần tử trong JavaScript của bạn (mà dường như là đường dẫn bạn hiện đang sử dụng với mã hiện tại của bạn).

Sử dụng một thuộc tính data trong các yếu tố mà bạn muốn sử dụng như là giả nhãn, như sau:

<span data-labelfor="name">Name</span> 
<input type="checkbox" id="name"> 

Và sau đó bạn có thể thiết lập các handler nhấp chuột với một số generic jQuery để chọn tất cả các yếu tố với thuộc tính :

$(document).ready(function() { 

    $("[data-labelfor]").click(function() { 
     $('#' + $(this).attr("data-labelfor")).prop('checked', 
          function(i, oldVal) { return !oldVal; }); 
    }); 

}); 

bản demo Làm việc cho thấy rằng một chức năng ngắn áp dụng hành vi để một khoảng một nhãn và một div: http://jsfiddle.net/TFD72/

Original câu trả lời:

Như Pavan đã giải thích, bạn có thể làm điều này tự động bằng cách sử dụng thuộc tính for trong nhãn của bạn, nhưng như xa như tại sao mã của bạn không làm việc:

Cuộc gọi của bạn đến CheckCheckBox() chức năng là đi qua hai đối tượng jQuery như các tham số như sau:

CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1')); 

Nhưng chức năng đang xử lý các tham số như thể chúng là các chuỗi chứa id của các phần tử bạn muốn xử lý.Vì vậy, nếu bạn muốn giữ chức năng của bạn như là chỉ thay đổi cách bạn gọi nó là vượt qua đúng loại tham số:

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1'); 

Điều đó sẽ khắc phục lỗi bạn báo giá.

Tuy nhiên, chức năng của bạn là sẽ đặt hộp kiểm để "kiểm tra" trên mỗi nhấp chuột của nhãn, ngay cả khi nó đã được chọn. Nếu bạn muốn nó để chuyển đổi giữa (tức là hành vi bình thường) kiểm tra và kiểm soát bạn có thể làm một cái gì đó như thế này:

$('#' + Checkbox1).prop('checked', function(i, oldVal) { return !oldVal; }); 

(. Nhưng một lần nữa, chỉ làm điều đó trong đánh dấu html sử dụng thuộc tính for)

Answer 2

Bạn không cần phải viết mã JQuery. Bạn có thể làm điều này với HTML.

Thay đổi html của bạn như sau

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label> 

đây là jsfiddle. http://jsfiddle.net/sjG4w/

Answer 3

Bạn có thể làm điều này bằng

<label id="lblAssociateWithCheckBox" title="Check" OnClick="JavaScript:ClickedLabel('Check1')" ></label> 

Trong ClickedLabel bạn có thể tìm thấy những yếu tố trôi qua và nếu nó được chọn làm bỏ chọn và nếu không được kiểm soát làm kiểm tra nó.

Answer 4

nếu bạn luôn sử dụng label và checkbox thì người dùng for thuộc tính của label và id của hộp kiểm là giống nhau. ví dụ:

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

HOẶC khác

 CheckCheckBox($('#lblAssociateWithCheckBox'), $(#'Checkbox1')); 
     function CheckCheckBox(lblID, chkID) { 
      lblID.live("click", function() { 
       return $(this).closest(chkID).attr('checked', true); 
      }); 
     } 

Answer 5

Có hai cách để làm điều này mà không cần bất kỳ javascript ở tất cả. Pavan giải thích cách đầu tiên, đó là sử dụng cho thuộc tính (phù hợp với id hộp kiểm):

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label> 

Cách khác, mà tôi thích là để bọc hộp kiểm trong một thẻ label:

<label><input type="checkbox" id="Checkbox1"> Text</label> 

Đây là jsfiddle cho cả hai: http://jsfiddle.net/m4rK5/