Question

给出这样简单的东西：

<form ...>
<input type="checkbox" required name="op1"> Option 1</u>
<input type="checkbox" required name="op2"> Option 2</u>
<input type="submit">
</form>

有没有办法使用HTML5验证来验证是否选中了其中一个框，是否选择了任何一个框以将所需的工具提示集中在表单上？

Answer 1

你不能只使用HTML5，但这是一种使用javascript

的方法

Html

<form onsubmit="return checkCheckBoxes(this);">
<input type="checkbox" required name="op1"> Option 1</u>
<input type="checkbox" required name="op2"> Option 2</u>
<input type="submit">
</form>

的Javascript

 <script type="text/javascript" language="JavaScript">
    <!--
    function checkCheckBoxes(theForm) {
        if (
        theForm.opt1.checked == false &&
        theForm.opt2.checked == false) 
        {
            alert ('You didn\'t choose any of the checkboxes!');
            return false;
        } else {    
            return true;
        }
    }
    //-->
    </script>

Answer 2

您需要使用JavaScript或其他内容来存档。使用纯HTML无法做到这一点。

以下代码对我有用。希望它会有所帮助。

<ul>
   <li><input name="check[]" type="checkbox" value="check 1" required><label>check 1</label></li>
   <li><input name="check[]" type="checkbox" value="check 2" required><label>check 2</label></li>
   <li><input name="check[]" type="checkbox" value="check 3" required><label>check 3</label></li>
   <li><input name="check[]" type="checkbox" value="check 4" required><label>check 4</label></li>
</ul>
<input type="submit" value="Check" id="check">

jQuery代码，

<script type="text/javascript">
$(document).ready(function () {
    $('#check').click(function(e) {
     var ischecked = $("input[type=checkbox]:checked").length;
      if(!ischecked) {
        alert("Please select at least one checkbox.");
     return false;
      }

    });
});
</script>

复选框的HTML5浏览器验证 - 给定多个复选框如何确保选择至少一个复选框？

2 个答案: