jQuery - Tạo hình ảnh Chuyển đổi cho hộp kiểm

Question

Tôi có một hộp kiểm khá đơn giản, đó là một boolean, true/false, checked hoặc unchecked.

Điều tôi muốn làm là giữ hộp kiểm nhưng ẩn nó và cho phép người dùng nhấp vào hình ảnh (vòng tròn tối hoặc vòng tròn màu xanh), sau đó bật/tắt hộp kiểm. Nhưng tôi không thể tìm ra nơi để bắt đầu một cái gì đó như thế này.

Ý tưởng?

Answer 1

Ví dụ:http://jsfiddle.net/Gfmz2/(hộp kiểm có thể nhìn thấy trong ví dụ)

var cbox = $('#myHiddenCheckbox')[0]; 

$('#myImage').click(function() { 
    cbox.checked = !cbox.checked; 
}); 

Answer 2

Ngoài những gì Patrick gợi ý bạn có thể thêm hình ảnh đang chuyển đổi qua lại như sau:

var cbox = $('#myHiddenCheckbox')[0]; 

$('#myImage').click(function() { 
    cbox.checked = !cbox.checked; 
     this.src = (cbox.checked)?"images/bluecircle.jpg":"images/blackcircle.jpg"; 
}); 

Answer 3

Bạn có thể đưa hình ảnh vào nhãn của hộp kiểm, điều này có hiệu quả làm cho nó trở thành một phần của hộp kiểm (do đó, nhấp vào nó sẽ chuyển đổi hộp kiểm):

<label for="moreinfo"> 
<img src="darkCircle.jpg"/> 
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none"> 
</label> 

$("#moreinfo").change(function() { 
    if(this.checked) { 
     $(this).prev().attr("src", "lightCircle.jpg"); 
    } else { 
     $(this).prev().attr("src", "darkCircle.jpg"); 
    } 
});