Question

我有一个PHP表单，在提交表单之前至少选中一个复选框。如果单击提交而未选择至少一个复选框，则为需要警报。任何人都可以建议我在Jquery1.10.2中这样做。我在jquery中尽我所能，它为我工作。

<script>
function onSubmit() 
{ 
  var fields = $(".chk_boxes1").serializeArray(); 
  if (fields.length == 0) 
  { 
    alert('nothing selected'); 
    // cancel submit
    return false;
  }   
}
// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)
</script>


<?php
echo '<form action="" method="post" id="subscribeForm">               
       <table>
         <tr>                                              
            <th>ROLE</th>
            <th>DESCRIPTION</th>    
            <th>PERMISSIONS<br><input type="checkbox" class="chk_boxes"></th>  
         </tr>

         <tr>
            <td><input type="text" name="role_name" required></td>
            <td><input type="text" value="" name="role_desc" required></td>
            <td><input type="checkbox" class="chk_boxes1" name="perm[]" value="0">My Account<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="1">Edit Account<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="2">Change password<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="3">List of users<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="4">Define roles<br>
                <input type="checkbox" class="chk_boxes1" name="perm[]" value="5">Assign roles<br>
         </td></tr></table>
         <div><input type="submit" name="new_role" value="create newrole"></div>
      </form>';
?>

Answer 1

你可以这样做：

$("#new_role").on("click",function(){
    if($( "input:checked" ).length == 0)
        alert("You should check something");
    else
        $("#subscribeForm").submit();
});

请参阅JSFIDDLE DEMO

Answer 2

首先使用onsubmit事件 -

调用表单中的函数

<form action="" method="post" id="subscribeForm" onsubmit="return onSubmit();">

以下是验证复选框的功能

function onSubmit() {
    if ($(".chk_boxes1:checked").length < 1) {
        alert("Please select at least one checkbox.");
        return false;
    } else {
        return true;
    }
}

Answer 3

您可以尝试使用：checked pseudo element

if($('chk_boxes1:checked').length == 0)
{
    alert('At least one checkbox has to be selected')
}

Answer 4

尝试以下代码：您可以更改输入type="button"而不是type="submit"，并在按钮的onSubmit()上调用onclick功能。并且在函数内部检查是否使用已选中复选框的长度来检查至少一个复选框，如果条件为真，则提交表单，否则显示警告。

    <script>
    function onSubmit() 
    { 
      var checkedCheckbox = $(".chk_boxes1:checked").length; 
      //if no checkbox selected then show alert
      if (checkedCheckbox == 0) 
      { 
        alert('nothing selected'); 
        // cancel submit
        return false;
      }   
      else
     {
        // submit form
         $('#subscribeForm').submit();
      }

    }

    </script>


    <?php
    echo '<form action="" method="post" id="subscribeForm">               
           <table>
             <tr>                                              
                <th>ROLE</th>
                <th>DESCRIPTION</th>    
                <th>PERMISSIONS<br><input type="checkbox" class="chk_boxes"></th>  
             </tr>

             <tr>
                <td><input type="text" name="role_name" required></td>
                <td><input type="text" value="" name="role_desc" required></td>
                <td><input type="checkbox" class="chk_boxes1" name="perm[]" value="0">My Account<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="1">Edit Account<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="2">Change password<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="3">List of users<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="4">Define roles<br>
                    <input type="checkbox" class="chk_boxes1" name="perm[]" value="5">Assign roles<br>
             </td></tr></table>
             <div><input type="button" name="new_role" value="create newrole" onclick="onSubmit()"></div>
          </form>';

?>

Answer 5

工作代码

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            var atLeastOneIsChecked = false;
            function validateForm() {
                $('input:checkbox').each(function () {
                    if ($(this).is(':checked')) {
                      atLeastOneIsChecked = true;
                    }
                });
                if (!atLeastOneIsChecked) {
                    alert("please tick any of the check boxes");
                }
                else{
                    alert("Success");
                    //submit form
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post" id="subscribeForm" onsubmit="return validateForm();">               
            <table>
                <tr>                                              
                   <th>ROLE</th>
                   <th>DESCRIPTION</th>    
                   <th>PERMISSIONS<br><input type="checkbox" class="chk_boxes"></th>  
                </tr>
                <tr>
                   <td><input type="text" name="role_name" required></td>
                   <td><input type="text" value="" name="role_desc" required></td>
                   <td><input type="checkbox" class="chk_boxes1" name="perm[]" value="0">My Account<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="1">Edit Account<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="2">Change password<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="3">List of users<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="4">Define roles<br>
                       <input type="checkbox" class="chk_boxes1" name="perm[]" value="5">Assign roles<br>
                    </td>
                </tr>
            </table>
            <div><input type="submit" name="new_role" value="create newrole"></div>
        </form>
    </body>
</html>

验证jquery中的复选框

5 个答案: