HTML-флажок при клике вызывается в Javascript

Question

У меня возникли проблемы с попыткой выяснить, как заставить работать определенную часть моего кода.

<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>

Это мой HTML, который работает как надо (щелкнув по тексту, вы увидите поле). Javascript для него довольно прост:

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

Тем не менее, я хочу, чтобы щелчок происходил для ввода, когда метка - это то, что делает флажок нажатым. В настоящее время onClick js не идет. Каково одно предложение о том, как это сделать? Я пытался добавить щелчок ввода для ярлыка, но это не сработало.

Любые предложения / решения были бы замечательными.

Answer 1

Как насчет того, чтобы поместить checkbox в label, сделать метку автоматически "чувствительной к нажатию" для флажка и присвоить этому флажку событие onchange?

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

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

Это дополнительно поймает пользователей, использующих клавиатуру для переключения флажка, что onclick не будет.

Answer 2

Метка без клика будет вести себя так, как вы ожидаете.Это меняет вход.Что вы действительно хотите, чтобы выполнить selectAll(), когда вы нажимаете на ярлык, верно?Тогда только добавьте выделите все на ярлык по клику.Или оберните ввод в метку и назначьте клик только для метки

<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

Вы также можете извлечь код события из HTML, например:

<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>

Answer 4

jQuery имеет функцию, которая может сделать это:

1. включает в вашу голову следующий скрипт:

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

   (или просто загрузите файл jQuery.jsв режиме онлайн и включите его локально)

2. используйте этот сценарий для переключения флажка при нажатии на вход:

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

Это должно сделатьчто бы ты хотел, если бы я понял, что ты пытался сделать.