Validación de casilla de verificación de JavaScript simple

Question

Normalmente trabajo con PHP, lamentablemente no tengo algunos principios básicos de JS. Esto es todo lo que quiero lograr: he visto muchas publicaciones sobre este tema, pero generalmente superan lo que necesito.

Aquí es mi forma:

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

La casilla de verificación es un simple "estoy de acuerdo". Quiero que se presione el botón Enviar y solo se enviará si esa casilla de verificación está seleccionada.

Esto es lo que quiero decir: quiero la manera simple y trampa, sin métodos, solo un código en línea en esa forma (suponiendo que no sea demasiado largo). Esta no es una página pública, solo necesito algo rápido y simple con ese tipo de validación. Si no está marcado, arrojará una alerta(); si está marcada, se enviará por correo a través de php y continuará normalmente.

Answer 1

que puede usar:

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}" /> 

• Volviendo false de un controlador de eventos inline impedirá la acción por defecto que tenga lugar (en este caso, la presentación de la forma).
• ! es el Boolean NOT operator.
• this es el botón de enviar porque es el elemento al que está asociado el controlador de eventos.
• .form es la forma del botón de envío está en.
• .checkbox es el control denominado "casilla de verificación" en esa forma.
• .checked es verdadero si la casilla de verificación está marcada y es falsa si la casilla de verificación está desmarcada.

Answer 2

Usted puede hacer algo como esto:

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

Aunque en mi humilde opinión menos legible, esto se puede hacer sin una definición de función separada de esta manera:

<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

Si su casilla tiene un ID de 'casilla de verificación':

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

HTH

Answer 4

Usted puede hacer lo siguiente:

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

Aquí es una demostración de trabajo - 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

chicos con los que se puede hacer este tipo de validación muy fácilmente. Solo tienes que rastrear la identificación o el nombre de las casillas de verificación. puedes hacerlo estática o dinámicamente.

Para estáticamente puede usar la identificación codificada de las casillas de verificación y para dinámicamente puede usar el nombre del campo como una matriz y crear un bucle.

Por favor, compruebe el siguiente enlace. Obtendrá mi punto muy fácilmente.

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

Gracias

Answer 7

Si la identificación del cuadro cheque "Eliminar" a continuación para el "onclick" evento de la botón de envío la función de JavaScript puede ser el siguiente:

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

Por ahora no hay jquery o php nee Ded. Utilizar sólo "requerida" attrbute de entrada HTML5 como aquí

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

Esto validará y prevenir cualquier Enviar antes de casilla de verificación está en optar. Idioma solución independiente debido a que su navegador generado por los usuarios web.

Answer 9

Otra forma simple es crear una función y verificar si las casillas de verificación están marcadas o no, y deshabilitar un botón de esa manera usando jQuery.

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"); 
    } 
} 

Ahora usted tiene un botón que está desactivado hasta que seleccionar la casilla de verificación, y ahora usted tiene una mejor experiencia de usuario. Sin embargo, me aseguraría de que aún realices la validación del lado del servidor.