javascript - 选择多个复选框后如何检查是否有任何值保存在数组中

Question

我一直在研究以下表格，用户可以在该表格中以球员或教练的身份注册到网站。在这里，我想检查用户是否至少选择了一项运动，如果没有，表单应该提醒用户选择一项运动。html代码如下。

<form action="" name="userForm" method="POST" onsubmit="return upassword()" enctype="multipart/form-data">
    <table cellspacing="2" cellpadding="2" border="0" >
        <tr>
            <td colspan="5">
                <p>First Name</p>
                <input type="text" placeholder="First Name" name="Fname" required>              
            </td>
            <td colspan="5">
                <p>Last Name</p>
                <input type="text" placeholder="Last Name" name="Lname" required>               
            </td>           
        </tr>
        <tr>
            <td colspan="10">
                <p>Profile Picture</p>
                <input type="file" name="Pimage" required>              
            </td>
        </tr>
        <tr>
            <td colspan="10">
                <p>Gender</p>               
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="radio" name="Gender" value="Male">             
            </td>
            <td>
                <label>Male</label>         
            </td>
            <td>
                <input type="radio" name="Gender" value="Female">           
            </td>
            <td>
                <label>Female</label>           
            </td>               
            <td colspan="5"></td>
        </tr>
        <tr>
            <td colspan="10">
                <p>Sports</p>               
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="Sport[]" value="Squash">               
            </td>
            <td>
                <label>Squash</label>           
            </td>
            <td>
                <input type="checkbox" name="Sport[]" value="Tennis">               
            </td>
            <td>
                <label>Tennis</label>           
            </td>
            <td>
                <input type="checkbox" name="Sport[]" value="Badminton">                
            </td>
            <td>
                <label>Badminton</label>            
            </td>
            <td>
                <input type="checkbox" name="Sport[]" value="Archery">              
            </td>
            <td>
                <label>Archery</label>          
            </td>
            <td></td>               
        </tr>           
        <tr>
            <td colspan="10">
                <p>Username</p>
                <input type="text" placeholder="Username" name="Username" required>             
            </td>           
        </tr>
        <tr>
            <td colspan="5">
                <p>Password</p>
                <input type="password" placeholder="10-20 characters including @, #, $, %, &" name="Password" pattern="[a-zA-Z0-9%@#$&]{10,20}" required>           
            </td>
            <td colspan="5">
                <p>Re-enter password</p>
                <input type="password" placeholder="Re-enter password" name="RPassword" required>               
            </td>           
        </tr>
        <tr>
            <td colspan="10" align="center">
            <br/>
                <p>User Type</p>                
            </td>
        </tr>
        <tr>
            <td colspan="3"></td>
            <td>
                <input type="radio" name="User" value="Player">             
            </td>
            <td>
                <label>Player</label>           
            </td>
            <td>
                <input type="radio" name="User" value="Coach">          
            </td>
            <td>
                <label>Coach</label>            
            </td>               
            <td colspan="3"></td>
        </tr>               
        <tr>
            <td colspan="10"><br/></td>
        </tr>           
        <tr>
            <td colspan="3"></td>
            <td>
                <input type="checkbox" id="userAgree" name="userAgree" onclick="usubmitenable()">               
            </td>
            <td colspan="6">
                <label>I agree to the terms and conditions.</label>
            </td>
        </tr>
        <tr>
            <td colspan="10"><br/></td>
        </tr>
        <tr align="center">
            <td colspan="5">
                <button type="submit" id="usersbt" value="Submit" disabled>Submit</button>              
            </td>
            <td colspan="5">
                <button type="reset" value="Reset" style="background-color:#a32626;">Reset</button>         
            </td>               
        </tr>           
    </table>
</form>

对于验证部分，我使用了以下 JavaScript 函数。

function upassword(){
    var a=document.userForm.Password.value;
    var b=document.userForm.RPassword.value
    var c=document.userForm.Gender.value;
    var e=document.userForm.User.value;
    var f= new Array();
    f=document.userForm.Sport[].value;
    if(c=="")
    {
        alert("Please Select Gender!");
        return false;       
    }   
    else if(e=="")
    {
        alert("Please Select User Type!");
        return false;       
    }
    else if(f.length == 0)
    {
        alert("Please Select Sport!");
        return false;       
    }
    else if(a!=b)
    {
        alert("Passsword Mismatch!");
        return false;
    }
    else
    {
        return( true );         
    }
}

function usubmitenable(){
    if(document.getElementById("userAgree").checked)
    {
        document.getElementById("usersbt").disabled = false;
    }
    else
    {
        document.getElementById("usersbt").disabled = true;
    }
}

如果我注释掉我检查是否已选中任何复选框的部分，则验证工作正常。否则，代码不起作用。我该如何解决这个问题？请帮忙，谢谢！

标签： javascripthtml

Answer 1

于是我在网上找了一个代码片段，按照我的表格改了，效果很好。谢谢你的帮忙！这是代码。

var checkboxs = document.getElementsByName('Sport[]');
var okay = 0;
for (var i = 0, l = checkboxs.length; i < l; i++) {
  if (checkboxs[i].checked) {
    okay = 1;
    break;
  }
}
if (okay == 0) {
  alert("Please Select Sport!");
  return false;
}