15

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

这是我的表格：

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

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

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

4

12 回答 12

36

你可以使用：

 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将阻止默认操作发生（在这种情况下，提交表单）。
  • !是布尔非运算符。
  • this是提交按钮，因为它是事件处理程序附加到的元素。
  • .form是提交按钮所在的表单。
  • .checkbox是该表单中名为“复选框”的控件。
  • .checked如果复选框被选中，则为 true，如果未选中复选框，则为 false。
于 2012-06-27T20:59:50.777 回答
6

现在不需要 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>

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

于 2015-03-13T08:29:21.230 回答
4

你可以这样做：

<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>
于 2012-06-27T20:53:05.497 回答
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/

于 2012-06-27T20:57:58.567 回答
2 
var confirm=document.getElementById("confirm").value;
         if((confirm.checked==false)
         {
         alert("plz check the checkbox field");
         document.getElementbyId("confirm").focus();
         return false;
         }
于 2013-04-16T07:49:31.103 回答
2

如果复选框的 ID为“ Delete ”，那么对于提交按钮的“ 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>
于 2014-09-25T21:19:35.620 回答
1

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

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

高温高压

于 2012-06-27T20:54:18.970 回答
1

另一种简单的方法是创建一个函数并检查复选框是否被选中，然后使用 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");
     }
}

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

于 2016-07-21T17:03:03.993 回答
1

validate()另一种简单的方法是在表单加载和单击提交按钮时创建和调用函数。通过使用checked属性，我们检查复选框是否被选中。 有一个用于访问第一个值（即男性）cbox[0]的索引0name="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

于 2018-08-23T14:18:15.340 回答
0

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

function check(){
    if(document.getElementById('yourid').checked
    {
        return true;
    }
    else
    {
        alert ("checkbox not checked"); 
        return false;
    }
}
于 2021-10-08T06:34:23.603 回答
-1 
var testCheckbox = document.getElementById("checkbox");  
if (!testCheckbox.checked) {
  alert("Error Message!!");
}
else {
  alert("Success Message!!");
}
于 2018-09-13T10:03:35.857 回答
-2

伙计们，您可以很容易地进行这种验证。只是您必须跟踪复选框的 ID 或名称。您可以静态或动态地执行此操作。

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

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

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

谢谢

于 2013-04-25T11:08:26.987 回答