Простой JavaScript Checkbox Validation

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

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

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

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

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

Ответ 1

Вы можете использовать:

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

(демонстрационная страница).

<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 из встроенного обработчика событий предотвратит выполнение действия по умолчанию (в этом случае отправьте форму).
! является логическим оператором NOT.
this - кнопка отправки, потому что это элемент, к которому привязан обработчик событий.
.form - это форма, в которой находится кнопка отправки.
.checkbox - это элемент управления с именем "checkbox" в этой форме.
.checked true, если флажок установлен и false, если флажок снят.

Ответ 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/

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

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

Ответ 3

На данный момент не требуется jquery или php. Используйте только "необходимый" входной 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>

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

Ответ 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/

Ответ 5

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

Ответ 6

Если у вас установлен флажок "checkbox":

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

НТН

Ответ 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>

Ответ 8

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

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

Ответ 9

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

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

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

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

Спасибо