Простой JavaScript Checkbox Validation

Question

Я обычно работаю с PHP, поэтому, к сожалению, нет основополагающих принципов JS. Это все, что я хочу сделать - я видел много сообщений по этой теме, но они обычно превышают то, что мне нужно.

Вот моя форма:

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

Флажок простой "Я согласен". Я хочу, чтобы кнопка отправки нажата, и она будет отправлена ​​только в том случае, если этот флажок установлен.

Вот что: я хочу простой, обманный способ - никаких методов - просто какой-то встроенный код в этой форме (если предположить, что он не слишком длинный?). Это не общедоступная страница, мне просто нужно что-то быстрое и простое с этим типом проверки. Если его непроверено, он выдает предупреждение(); если его проверит, он будет отправлять через почту через php и продолжать, как обычно.

Answer 1

Вы могли бы использовать:

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

• Возвращение false из обработчика событий инлайн предотвращает действие по умолчанию от происходящих (в этом случае, отправка формы).
• ! является Boolean NOT operator.
• this - кнопка отправки, потому что это элемент, к которому привязан обработчик событий.
• .form является формой кнопки передачи в.
• .checkbox является контроль под названием «галочка» в этой форме.
• .checked true, если флажок установлен и false, если флажок не установлен.

Answer 2

Вы можете сделать что-то вроде этого:

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

хотя и менее разборчивым Имхо, это может быть сделано без отдельного определения функции следующим образом:

<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

Если флажок имеет удостоверение личности 'checkbox':

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

НТН

Answer 4

Вы можете сделать следующее:

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

Вот рабочая демо - 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

Ребята вы можете сделать этот вид проверки очень легко. Просто вы должны отслеживать идентификатор или имя флажков. вы можете сделать это статически или динамически.

Для статически вы можете использовать жестко закодированный идентификатор флажков, и для динамического использования вы можете использовать имя поля в качестве массива и создать цикл.

Пожалуйста, проверьте приведенную ниже ссылку. Вы получите очень легко.

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

Благодаря

Answer 7

Если идентификатор флажка, в "Удалить", то для "OnClick" события кнопки отправки Javascript функции может быть следующей:

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

На данный момент нет jquery или php nee Ded. Используйте только «необходимый» вход attrbute HTML5, как здесь

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

Это подтвердит и предотвратить любые представить до чекбокс выбрать в. Язык самостоятельное решение, так как его порождена пользователи веб-браузера.

Answer 9

Еще один простой способ - создать функцию и проверить, отмечены ли флажки (флажки) или нет, и отключить кнопку таким образом, используя 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"); 
    } 
} 

Теперь у вас есть кнопка, которая отключена, пока они не установите флажок, и теперь у вас есть лучший пользовательский опыт. Однако я бы удостоверился, что вы все еще выполняете проверку на стороне сервера.