简单的 JavaScript 复选框验证

Question

我通常使用 PHP，所以很遗憾没有一些基本的 JS 原则。这就是我想要完成的全部 - 我已经看过很多关于这个主题的帖子，但它们通常超出了我的需要。

这是我的表格：

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

复选框是一个简单的“我同意”。我希望按下提交按钮，并且仅在选中该复选框时才会提交。

事情是这样的：我想要一种简单的欺骗方式——没有方法——只是一些这种形式的内联代码（假设它不是太长？）。这不是一个公共页面，我只需要这种类型的验证快速简单的东西。如果未选中，它将抛出警报（）；如果选中，它将通过 php 通过 post 提交并照常进行。

Answer 1

你可以这样做：

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

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

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

HTH

Answer 3

您可以执行以下操作：

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

你可以使用：

 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 如果复选框被选中则为真，如果复选框未选中则为假。

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 或名称。您可以静态或动态地执行此操作。

对于静态，您可以使用复选框的硬编码 id，对于动态，您可以使用字段名称作为数组并创建一个循环。

请检查以下链接。你会很容易明白我的意思。

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

谢谢

Answer 7

如果复选框的ID为“删除”，那么对于提交按钮的“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。像这里一样只使用“必需的”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");
     }
}

现在您有一个按钮，在他们选中复选框之前，该按钮处于禁用状态，现在您获得了更好的用户体验。不过，我会确保您仍然进行服务器端验证。

Answer 10

另一种简单的方法是在表单加载和单击提交按钮时创建和调用函数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 11

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

Answer 12

通过 id 定位它，然后使用此代码：

function check(){
    if(document.getElementById('yourid').checked
    {
        return true;
    }
    else
    {
        alert ("checkbox not checked"); 
        return false;
    }
}