Question

下面是HTML / PHP代码，我需要在提交表单之前验证5个中的任何一个复选框。

＆＃13;

function checkAddress(checkbox)
{
    if (checkbox.checked)
    {
document.frmUser.action = "edit_user.php";
document.frmUser.submit();
    }

else {alert("checkbox");}
}

＆＃13;

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Details Form</title>
<script language="javascript" type="text/javascript">

function checkAddress(checkbox)
{
    if (checkbox.checked)
    {
document.frmUser.action = "edit_user.php";
document.frmUser.submit();
    }

else {alert("checkbox");}
}
</script>      
</head>

<body>

<div class="form-style-1">
<form name="frmUser" method="post" action="">
<?php
i=0;
while(i=5){
?>
<input type="checkbox" name="users[]" value="<?php echo i; ?>" >
<input type="button" name="update" class="button" value="Update" onClick="checkAddress(this);" />
<?php
$i++;}
?>
</form></div></body></html>

＆＃13;

Answer 1

您正在通过按钮呼叫onClick="checkAddress(this);"，因此this指的是按钮而不是一个复选框，因此您的功能{ {1}}正在测试是否选中了按钮 - 显然它永远不会。

要测试是否至少选中了一个复选框，您可以循环测试它们，但您也可以按如下步骤进行操作：

checkbox.checked

.querySelector() method返回第一个匹配元素（这是在if (document.querySelector('form[name="frmUser"] input[name="users[]"]:checked')) { // at least one is checked }测试中使用的真值），如果没有找到匹配元素，则返回if（这是假的在null测试中使用的值。

（如果页面只有一个带有一组复选框的表单，那么您可以将选择器简化为类似if的内容，但我认为最好明确指出您正在测试哪些项目。）

在上下文中：

＆＃13;

.querySelector(':checked')

＆＃13;

function checkAddress()
{
    if (document.querySelector('form[name="frmUser"] input[name="users[]"]:checked')) {
        alert("Success! (form would be submitted here)");
        //document.frmUser.action = "edit_user.php";
        //document.frmUser.submit();
    } else {
        alert("You must select at least one checkbox");
    }
}

＆＃13;

Answer 2

我认为你正在努力做到这一点

＆＃13;

function checkAddress(checkbox) {
  if (checkbox.checked) {
    document.frmUser.action = "edit_user.php";
    //document.frmUser.submit();
  } else {
    document.frmUser.action = "#";
    alert("checkbox");
  }
}

＆＃13;

<div class="form-style-1">
  <form name="frmUser" method="post" action="">
    <?php $i=0; while($i<=5){ ?>
    <input type="checkbox" name="users[]" onClick="checkAddress(this);" value="<?php echo $i; ?>">

    <?php $i++;} ?>
    <input type="submit" name="update" class="button" value="Update" />
  </form>
</div>

＆＃13;

代码中的一些错误

您在表示变量$

i

您正在button循环中取while，因此它也会重复使用复选框。

Answer 3

发布的代码还有另一个问题 - 变量i未正确定义〜应该是$i

不是直接将功能分配给按钮，而是可以创建这样的事件监听器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Details Form</title>
        <script language="javascript" type="text/javascript">
            function validate(e){
                var form=e.target.parentNode;
                var col=form.querySelectorAll('input[type="checkbox"]');
                var checked=[];
                if( col )for( var n in col )if( col[n].nodeType==1 ){
                    if( col[n].checked ) checked.push( col[n].name );
                }
                if( checked.length > 0 ){
                    form.action='edit_user.php';
                    form.submit();
                } else {
                    alert('You MUST tick at least one checkbox');
                }
            }
            function bindEvents(){
                var bttn=document.forms['frmUser'].querySelectorAll('input[type="button"]')[0];
                    bttn.addEventListener( 'click', validate, false );
            }
            document.addEventListener('DOMContentLoaded', bindEvents, false );
        </script>      
    </head>
    <body>
        <div class="form-style-1">
            <form name="frmUser" method="post" action="">
            <?php
                $i=0;
                while( $i <= 5 ){
                    echo "<input type='checkbox' name='users[]' value='{$i}' >";
                    $i++;
                }
                echo "<input type='button' name='update' class='button' value='Update' />";
            ?>
            </form>
        </div>
    </body>
</html>

Answer 4

＆＃13;

<html>
<head>
<script language="javascript" type="text/javascript">
function checkAddress()
{
    if (document.querySelector('form[name="frmUser"] input[type="checkbox"]:checked')) {
        alert("Success! (form would be submitted here)");
        //document.frmUser.action = "edit_user.php";
        //document.frmUser.submit();
    } else {
        alert("You must select at least one checkbox");
    }
}
</script>      
</head>

<body>

<div class="form-style-1">
<form name="frmUser" method="post" action="">
<?php
$i=0;
while($i<=5){
?>
<input type="checkbox" name="users[]" value="<?php echo $i; ?>" >
<input type="button" name="update" class="button" value="Update" onClick="checkAddress(this);" />
<?php
$i++;}
?>
</form></div></body></html>

＆＃13;

HTML如何在提交之前验证Array中的任何复选框

4 个答案: