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

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

38 голосов
/ 07 июля 2010

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

<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 не идет. Каково одно предложение о том, как это сделать? Я пытался добавить щелчок ввода для ярлыка, но это не сработало.

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

Ответы [ 4 ]

61 голосов
/ 07 июля 2010

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

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

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

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

2 голосов
/ 07 июля 2010

Метка без клика будет вести себя так, как вы ожидаете.Это меняет вход.Что вы действительно хотите, чтобы выполнить 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>
0 голосов
/ 07 июля 2010

Вы также можете извлечь код события из 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>
0 голосов
/ 07 июля 2010

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;
});

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

...