wake-up-neo.net

HTML-Checkbox onclick in Javascript aufgerufen

Ich habe Probleme, herauszufinden, wie ich einen bestimmten Teil meines Codes zum Laufen bringen kann.

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

Dies ist mein HTML-Code, der so funktioniert, wie er soll (wenn Sie auf den Text klicken, wird das Kästchen angeklickt). Das Javascript dafür ist ziemlich einfach:

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

Ich möchte jedoch, dass das Klicken auf die Eingabe erfolgt, wenn die Beschriftung das Ankreuzfeld markiert. Zum jetzigen Zeitpunkt geht der OnClick-Js nicht. Was ist ein Vorschlag, wie das geht? Ich habe versucht, den Onclick der Eingabe zum Onclick des Labels hinzuzufügen, aber das funktioniert nicht. 

Anregungen/Lösungen wären wunderbar. 

34
Craig

Wie wäre es, wenn Sie die Variable checkbox in die Variable label setzen, die Beschriftung des Kontrollkästchens automatisch "klicken" und dem Kontrollkästchen ein Ereignis onchange zuweisen?

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

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

Dadurch werden Benutzer auch gefangen, die Tastatur zum Umschalten des Kontrollkästchens zu verwenden, etwas, das onclick nicht wäre. 

58
Unicron

Das Label ohne Onclick verhält sich wie erwartet. Es ändert die Eingabe. Sie möchten unbedingt selectAll() ausführen, wenn Sie auf ein Etikett klicken, oder?. Oder wickeln Sie die Eingabe in das Etikett ein, und weisen Sie "onclick" nur für das Etikett zu

<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 hat eine Funktion, die das kann:

  1. fügen Sie das folgende Skript in Ihren Kopf ein:

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

    (oder laden Sie einfach die Datei jQuery.js online herunter und fügen Sie sie lokal hinzu)

  2. verwenden Sie dieses Skript, um das Kontrollkästchen umzuschalten, wenn auf die Eingabe geklickt wird:

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

Das sollte tun, was Sie wollen, wenn ich verstanden hätte, was Sie wollten.

0
rownage

Sie können den Ereigniscode auch wie folgt aus dem HTML-Code extrahieren: 

<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