Einfache JavaScript Checkbox Validation

Question

Ich arbeite normalerweise mit PHP, leider haben einige grundlegende JS Prinzipien nicht. Das ist alles, was ich erreichen möchte - ich habe viele Beiträge zu diesem Thema gesehen, aber sie sind normalerweise jenseits dessen, was ich brauche.

Hier ist meine Form:

<input type="checkbox" name="checkbox" value="check" /> 
<input type="submit" name="email_submit" value="submit" onclick="----??----" /> 

Die Checkbox ist ein einfaches "Ich stimme zu". Ich möchte, dass der Submit-Button gedrückt wird und nur gesendet wird, wenn das Kontrollkästchen aktiviert ist.

Hier ist die Sache: Ich möchte die einfache, schummelnde Art und Weise - keine Methoden - nur ein paar Inline-Code in dieser Form (vorausgesetzt, es ist nicht übermäßig lang?). Dies ist keine öffentliche Seite, ich brauche nur etwas schnell und einfach mit dieser Art der Validierung. Wenn es nicht aktiviert ist, wird eine Warnung ausgelöst(); Wenn es überprüft wird, wird es per Post über PHP weitergeleitet und geht normal weiter.

Answer 1

Sie verwenden:

if(!this.form.checkbox.checked) 
{ 
    alert('You must agree to the terms first.'); 
    return false; 
} 

(demo page).

<input type="checkbox" name="checkbox" value="check" /> 
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" /> 

• Rückkehr false von einem Inline-Event-Handler wird die Standardaktion aus stattfindet (in diesem Fall Absenden des Formulars) verhindern.
• ! ist die Boolean NOT operator.
• this ist der Submit-Button, weil es das Element ist, an das der Event-Handler angehängt ist.
• .form ist die Form der Submit-Button ist in.
• .checkbox die Kontrolle "Checkbox" in dieser Form benannt ist.
• .checked ist wahr, wenn das Kontrollkästchen aktiviert ist und false, wenn das Kontrollkästchen deaktiviert ist.

Answer 2

Sie können etwas tun:

<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }"> 
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p> 
    <p><input type="SUBMIT" value="Submit!"></p> 
</form> 

Answer 3

Wenn Ihr Checkbox:

<form action="../" onsubmit="return checkCheckBoxes(this);"> 
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p> 
    <p><input type="SUBMIT" value="Submit!"></p> 
</form> 

<script type="text/javascript" language="JavaScript"> 
<!-- 
function checkCheckBoxes(theForm) { 
    if (
    theForm.MyCheckbox.checked == false) 
    { 
     alert ('You didn\'t choose any of the checkboxes!'); 
     return false; 
    } else {  
     return true; 
    } 
} 
//--> 
</script> 

http://lab.artlung.com/validate-checkbox/

Obwohl weniger lesbar imho, kann dies ohne eine separate Funktionsdefinition wie dies geschehen hat eine ID von 'checkbox':

if(document.getElementById('checkbox').checked == true){ // code here } 

HTH

Answer 4

Sie können folgendes tun:

<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }"> 
    <input type="checkbox" name="checkbox" value="check" id="agree" /> 
    <input type="submit" name="email_submit" value="submit" /> 
</form>​ 

Hier ist ein funktionierendes Demo - http://jsfiddle.net/Ccr2x/

Answer 5

var confirm=document.getElementById("confirm").value; 
     if((confirm.checked==false) 
     { 
     alert("plz check the checkbox field"); 
     document.getElementbyId("confirm").focus(); 
     return false; 
     } 

Answer 6

Jungs können Sie sehr leicht diese Art von Validierung tun. Sie müssen nur die ID oder den Namen der Checkboxen verfolgen. Sie können es statisch oder dynamisch tun.

Für statisch können Sie hart codierte ID der Checkboxen verwenden und für dynamisch können Sie den Namen des Feldes als ein Array verwenden und eine Schleife erstellen.

Bitte überprüfen Sie den folgenden Link. Du wirst meinen Punkt sehr leicht verstehen.

http://expertsdiscussion.com/checkbox-validation-using-javascript-t29.html

Dank

Answer 7

Wenn das ID des Kontrollkästchen " Löschen" dann für das "Onclick" Ereignis der Submit-Button die JavaScript-Funktion wie folgt sein:

html: 
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td> 
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()"> 

script: 
<script type="text/Javascript"> 
    function deleteData() { 
     if(!document.getElementById('Delete').checked){ 
      alert('Checkbox not checked'); 
      return false; 
     } 
</script> 

Answer 8

Für jetzt keine jquery oder php nee ded. Verwenden Sie nur „erforderlich“ HTML5 Eingang attrbute wie hier

<form> 
     <p> 
      <input class="form-control" type="text" name="email" /> 
      <input type="submit" value="ok" class="btn btn-success" name="submit" /> 
      <input type="hidden" name="action" value="0" /> 
     </p> 
     <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p> 
</form> 

Dies wird validieren und verhindern, jeder einreichen, bevor Checkbox entscheiden wird. Sprache unabhängige Lösung, weil ihre von Nutzern Web-Browser erzeugt.

Answer 9

Eine andere einfache Möglichkeit besteht darin, eine Funktion zu erstellen und zu prüfen, ob die Kontrollkästchen aktiviert sind oder nicht, und eine Schaltfläche auf diese Weise mit jQuery zu deaktivieren.

HTML:

<input type="checkbox" id="myCheckbox" /> 
<input type="submit" id="myButton" /> 

JavaScript:

var alterDisabledState = function() { 

var isMyCheckboxChecked = $('#myCheckbox').is(':checked'); 

    if (isMyCheckboxChecked) { 
    $('myButton').removeAttr("disabled"); 
    } 
    else { 
      $('myButton').attr("disabled", "disabled"); 
    } 
} 

Jetzt haben Sie eine Taste, die deaktiviert ist, bis sie das Kontrollkästchen aktivieren, und jetzt haben Sie eine bessere Benutzererfahrung. Ich würde sicherstellen, dass Sie trotzdem die serverseitige Validierung durchführen.