Javascript checkbox validation: Wie alarmiert man, wenn der Benutzer ein bestimmtes Kontrollkästchen nicht aktiviert hat?

Question

Also was ich tue ist so etwas wie eine einfache Medikationserinnerung, so dass das System eine Liste von Medikamenten anzeigen, die der Benutzer nehmen sollte, und der Benutzer dann das Kontrollkästchen der Medizin, die sie genommen haben, ankreuzen, aber was ich tun möchte ist Wenn der Benutzer zum Beispiel nur Medizin Eins und Zwei angekreuzt hat, dann möchte ich eine Warnung sagen: "Warum haben Sie Medizin Drei nicht genommen?" und ein Dropdown-Feld erscheint mit einer Liste möglicher Gründe, aus denen der Benutzer auswählen kann. Und wenn der Benutzer nur Medizin Drei einnimmt, zeigt das System einen Warnhinweis an: "Warum haben Sie Medizin Eins und Zwei genommen?", Und das Dropdown-Feld erscheint mit einer Liste möglicher Gründe. Und wenn der Benutzer alle drei Kontrollkästchen aktiviert hat, wird ein Warnhinweis mit der Aufschrift "That great! Well Done!" Angezeigt.

<form> 
<input type="checkbox" name="a" value="one">Medicine One<br> 
<input type="checkbox" name="b" value="two">Medicine Two<br> 
<input type="checkbox" name="c" value="three">Medicine Three<br> 
<input id=xbutton type="button" onClick="validate()" value="Submit"> 
</form> 

Ich weiß, wie eine Checkbox, die Validierung zu tun (wie eine Vereinbarung Checkbox Begriffe), aber ich bin ein wenig verwirrt, wie so viele Validierungsregeln in eine Funktion zu übernehmen.

Answer 1

Verwenden Sie querySelectorAll, um alle checkbox Elemente zu iterieren, und überprüfen Sie die .checked Eigenschaft.

Gibt eine Liste der Elemente innerhalb des Dokuments zurück (mit der Traversierung der Knoten des Dokuments durch die Tiefe der ersten Vorbestellung), die der angegebenen Gruppe von Selektoren entspricht. Das zurückgegebene Objekt ist eine NodeList.

input[type="checkbox"]:not(:checked) werden nur die Elemente auswählen, die nicht checked.

function validate() { 
 
    var msg = []; 
 
    [].forEach.call(document.querySelectorAll('input[type="checkbox"]:not(:checked)'), function(elem, index) { 
 
    msg.push(elem.name); 
 
    }); 
 
    alert(msg.length ? 'Please check ' + msg.join(' and ') : 'All are checked!'); 
 
}

<form> 
 
    <input type="checkbox" name="a" value="one">Medicine One 
 
    <br> 
 
    <input type="checkbox" name="b" value="two">Medicine Two 
 
    <br> 
 
    <input type="checkbox" name="c" value="three">Medicine Three 
 
    <br> 
 
    <input id=xbutton type="button" onClick="validate()" value="Submit"> 
 
</form>

Fiddle here

Answer 2

jquery verwenden können Ihnen helfen, die Dinge einfach zu machen. Hier

ist die Geige:https://jsfiddle.net/swaprks/zs7tpuo0/

HTML:

<form> 
    <input type="checkbox" name="a" value="one">Medicine One<br> 
    <input type="checkbox" name="b" value="two">Medicine Two<br> 
    <input type="checkbox" name="c" value="three">Medicine Three<br> 
    <input id=xbutton type="button" value="Submit"> 
</form> 

javascript:

$("#xbutton").click(function(){ 
    validate(); 
}); 

function validate(){ 
    if ($('input[type="checkbox"]:not(:checked)').length == 3) { 
    alert("Select atleast one option."); 
    } 
}