it-swarm.com.de

Einfache JavaScript-Checkbox-Überprüfung

Normalerweise arbeite ich mit PHP, daher gibt es leider keine grundlegenden JS-Prinzipien. Das ist alles, was ich erreichen möchte - ich habe viele Beiträge zu diesem Thema gesehen, aber sie sind normalerweise über das hinaus, 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 die Senden-Schaltfläche gedrückt wird, und es wird nur gesendet, wenn dieses Kontrollkästchen aktiviert ist.

Hier ist das Ding: Ich möchte den einfachen, betrügerischen Weg - keine Methoden - nur etwas Inline-Code in dieser Form (vorausgesetzt, es ist nicht zu lang?). Dies ist keine öffentliche Seite, ich brauche einfach etwas schnelles und einfaches mit dieser Art der Validierung. Wenn das Kontrollkästchen nicht aktiviert ist, wird eine Warnung ausgegeben (). Wenn das Kontrollkästchen aktiviert ist, wird es per Post per PHP übermittelt und normal fortgesetzt.

12
KickingLettuce

Du könntest benutzen:

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

( Demo-Seite ).

<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}"  />
  • Durch die Rückgabe von false von einem Inline-Ereignishandler wird die Standardaktion verhindert (in diesem Fall das Senden des Formulars).
  • ! ist der Boolesche NOT-Operator .
  • this ist die Schaltfläche zum Senden, da dies das Element ist, an das der Ereignishandler angehängt ist.
  • .form ist das Formular, in dem sich die Schaltfläche zum Senden befindet.
  • .checkbox ist das Steuerelement mit dem Namen "Kontrollkästchen" in diesem Formular.
  • .checked ist true, wenn das Kontrollkästchen aktiviert ist, und false, wenn das Kontrollkästchen deaktiviert ist.
29
PleaseStand

Momentan ist kein Jquery oder PHP erforderlich. Verwenden Sie einfach "erforderliche" HTML5-Eingabe 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>

Dadurch wird das Senden überprüft und verhindert, bevor das Kontrollkästchen aktiviert ist.

5
PrestaShark

Sie können so etwas tun:

<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 imho weniger lesbar, kann dies ohne eine separate Funktionsdefinition wie folgt erfolgen:

<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>
4
Eric J.

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 eine funktionierende Demo - http://jsfiddle.net/Ccr2x/

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

Wenn die ID des Kontrollkästchens " Delete " ist, dann kann für das " onclick " - Ereignis des Submit-Buttons die Javascript-Funktion wie folgt aussehen:

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

Wenn Ihre Checkbox eine ID von 'Checkbox' hat:

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

HTH

1
Jordizle

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 mithilfe von 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 Schaltfläche, die deaktiviert ist, bis sie das Kontrollkästchen aktivieren, und jetzt haben Sie eine bessere Benutzererfahrung. Ich würde jedoch sicherstellen, dass Sie immer noch die serverseitige Validierung durchführen.

1
maxshuty

Eine weitere einfache Möglichkeit ist, die Funktion validate() zu erstellen und aufzurufen, wenn das Formular beim Klicken auf die Schaltfläche zum Übernehmen des Formulars geladen wird. Mit der Eigenschaft checked prüfen wir, ob das Kontrollkästchen aktiviert ist oder nicht .cbox[0] hat einen Index 0, mit der auf den ersten Wert (dh Male) mit name="gender" zugegriffen wird.

Sie können Folgendes tun:

function validate() {
  var cbox = document.forms["myForm"]["gender"];
  if (
    cbox[0].checked == false &&
    cbox[1].checked == false &&
    cbox[2].checked == false
  ) {
    alert("Please Select Gender");
    return false;
  } else {
    alert("Successfully Submited");
    return true;
  }
}
<form onload="return validate()" name="myForm">
  <input type="checkbox" name="gender" value="male"> Male

  <input type="checkbox" name="gender" value="female"> Female

  <input type="checkbox" name="gender" value="other"> Other <br>

  <input type="submit" name="submit" value="Submit" onclick="validate()">
</form>

Demo:CodePen

0
aditya