HTML hộp kiểm onclick được gọi là trong Javascript

Question

Tôi đang gặp một chút khó khăn khi cố gắng tìm ra cách để có được một phần nhất định của mã của tôi hoạt động.

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);"> 
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label> 

Đây là HTML của tôi hoạt động như mong muốn (nhấp vào văn bản sẽ nhấp vào hộp). Javascript cho nó là khá đơn giản:

function toggleCheckbox(id) { 
    document.getElementById(id).checked = !document.getElementById(id).checked; 
} 

Tuy nhiên tôi muốn onclick xảy ra cho đầu vào khi nhãn là những gì làm cho hộp kiểm được nhấp. Tại thời điểm này, các onClick js không hoạt động. Một gợi ý về cách làm điều này là gì? Tôi đã cố gắng thêm onclick của đầu vào vào onclick của nhãn nhưng điều đó không hoạt động.

Mọi đề xuất/giải pháp sẽ tuyệt vời.

Answer 1

Làm thế nào về việc đưa các checkboxvào các label, làm cho nhãn tự động "click nhạy cảm" đối với các hộp kiểm tra, và cho vào hộp kiểm một sự kiện onchange?

<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....> 

function toggleCheckbox(element) 
{ 
    element.checked = !element.checked; 
} 

Điều này cũng sẽ bắt người dùng sử dụng bàn phím để chuyển đổi hộp kiểm, nội dung nào đó onclick thì không.

Answer 2

Nhãn không có onclick sẽ hoạt động như bạn mong đợi. Nó thay đổi đầu vào. Điều bạn muốn thực hiện là thực hiện selectAll() khi bạn nhấp vào nhãn, phải không? Sau đó, chỉ chọn thêm tất cả vào nhãn onclick. Hoặc quấn đầu vào cho nhãn và gán onclick chỉ dành cho các nhãn

<label for="check_all_1" onclick="selectAll(document.wizard_form, this);"> 
    <input type="checkbox" id="check_all_1" name="check_all_1" title="Select All"> 
    Select All 
</label> 

Answer 3

jQuery có một chức năng mà có thể làm điều này:

1. bao gồm các kịch bản sau đây trong đầu của bạn:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
   

   (hoặc chỉ cần tải xuống tệp jQuery.js trực tuyến và bao gồm tệp đó cục bộ)

2. sử dụng kịch bản này để chuyển đổi các hộp kiểm tra khi đầu vào được nhấp:

   var toggle = false; 
   $("#INPUTNAMEHERE").click(function() { 
        $("input[type=checkbox]").attr("checked",!toggle); 
        toggle = !toggle; 
   }); 
   

Điều đó sẽ làm những gì bạn muốn nếu tôi hiểu những gì bạn đang cố gắng làm.

Answer 4

Bạn cũng có thể trích xuất mã sự kiện từ HTML, như thế này:

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" /> 
<label for="check_all_1">Select All</label> 

<script> 
function selectAll(frmElement, chkElement) { 
    // ... 
} 
document.getElementById("check_all_1").onclick = function() { 
    selectAll(document.wizard_form, this); 
} 
</script>