web-dev-qa-db-fra.com

Case à cocher HTML appelée en Javascript

J'ai un peu de difficulté à essayer de trouver comment faire fonctionner une partie de mon code.

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

C'est mon HTML qui fonctionne comme il se doit (cliquer sur le texte va cocher la case). Le javascript pour cela est assez simple:

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

Cependant, je veux que l'onclick se produise pour l'entrée lorsque l'étiquette est ce qui fait que la case à cocher est activée À l'heure actuelle, onClick js ne va pas. Quelle est une suggestion sur la façon de faire cela? 

Toutes les suggestions/solutions seraient merveilleuses. 

javascriptinputcheckboxlabelonclick
34
Craig

Pourquoi ne pas insérer la checkbox dans la label, rendre l’étiquette automatiquement "sensible" pour la case à cocher et donner à la case à cocher un événement onchange?

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

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

En outre, les utilisateurs utilisant un clavier pour activer la case à cocher seront interceptés, ce que onclick ne ferait pas. 

58
Unicron

Une étiquette sans onclick se comportera comme prévu. Cela change l'entrée. Ce que vous voulez vraiment, c’est d’exécuter selectAll() lorsque vous cliquez sur une étiquette, pas vrai? Vous n’ajoutez alors que tout sélectionner à l’étiquette lorsqu’on clique. Ou envelopper l'entrée dans l'étiquette et attribuer à onclick uniquement pour l'étiquette

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

jQuery a une fonction qui peut faire ceci:

  1. inclure le script suivant dans votre tête:

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

    (ou téléchargez simplement le fichier jQuery.js en ligne et incluez-le localement)

  2. utilisez ce script pour activer la case à cocher lorsque vous cliquez sur l'entrée:

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

Cela devrait faire ce que vous voulez si je comprenais ce que vous essayiez de faire.

0
rownage

Vous pouvez également extraire le code d'événement du HTML, comme ceci: 

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