Question

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

这是我的表格：

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

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

这就是事情：我想要简单的，欺骗性的方式 - 没有方法 - 只是这种形式的一些内联代码（假设它不会过长？）。这不是一个公共页面，我只需要使用这种类型的验证快速而简单。如果未选中，则会抛出alert（）;如果它被检查它将通过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是该窗体中名为“checkbox”的控件。
.checked为true，如果未选中该复选框，则为false。

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>

这将在复选框选择之前验证并阻止任何提交。语言无关的解决方案，因为它是由用户的Web浏览器生成的。

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 ＆＃34; 删除＆＃34;那么＆＃34; onclick ＆＃34; 提交按钮的事件 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禁用一个按钮。

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

Answer 11

你可以很容易地进行这种验证。只需要跟踪复选框的ID或名称。你可以静态或动态地完成它。

对于静态，您可以使用复选框的硬编码ID，并且可以动态地将字段名称用作数组并创建循环。

请检查以下链接。你很容易理解我的观点。

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

由于

简单的JavaScript复选框验证

11 个答案: