简单的JavaScript复选框验证(Simple JavaScript Checkbox Vali

2019-06-25 19:53发布

站内文章 / 移动开发

5 0

叛逆

女 | 书童

私信

我通常使用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;
}

（演示页）。

<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以这样的形式命名为“复选框”控制。
.checked如果复选框被选中，假如果该复选框未选中是真实的。

Answer 2:

现在不需要的jQuery或PHP。只使用“必需的” HTML5输入attrbute喜欢这里

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

你可以这样做：

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

如果您的复选框有“复选框”的ID：

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

HTH

Answer 7:

如果复选框的ID“ 删除 ”，然后提交按钮的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:

另一种简单的方法是创建一个函数，并检查复选框（ES）进行检查与否，并禁用方式使用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");
     }
}

现在你有，直到他们选中该复选框被禁用的按钮，现在你有一个更好的用户体验。我将确保你还是做服务器端验证，但。

Answer 9:

另一种简单的方法是创建和调用函数validate()加载窗体时与当点击提交按钮。通过使用checked属性，我们选中该复选框是否被选中与否。 cbox[0]具有索引0 ，其用于与访问所述第一值（即男性） name="gender"

你可以做到以下几点：

 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>

演示： CodePen

Answer 10:

var testCheckbox = document.getElementById("checkbox");  
if (!testCheckbox.checked) {
  alert("Error Message!!");
}
else {
  alert("Success Message!!");
}