如何判断checkbox是否被选中

时间:2022-05-15 11:47:30

第一种情况:checkbox与submit键在同一个的form里面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<script>
function checkChecked(form1) {
    var anyBoxesChecked = false;
    $('#form1 input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
            anyBoxesChecked = true;
        }
    });

    if (anyBoxesChecked == false) {
      alert('Please select at least one checkbox');
      return false;
    } 
}

</script>

<!--Only one form and one table-->
    <div class="container">  
    <div class="row">  
    <form id="form1" name="form1" method="post" onsubmit="return checkChecked('form1');">  
    <table>
        <tr>
            <th><input id="checkbox" type="checkbox"/><br/></th>
            <th>ID</th>
            <th>Username</th>
        </tr>
        <tr>    
            <td><input id="checkbox" type="checkbox"/><br/></td> 
            <td>1</td> 
            <td>Tommy</td> 
        </tr>        
        <tr>    
            <td><input id="checkbox" type="checkbox"/><br/></td>  
            <td>2</td> 
            <td>Douby</td> 
        </tr>        
        <tr>    
            <td><input id="checkbox" type="checkbox"/><br/></td>
            <td>3</td> 
            <td>Daiby</td> 
        </tr>  
    </table>
    <button name="submit" type="submit">Submit</button>  
    </form>  
    </div>  
    </div>      

</body>
</html>

最终效果图:

没有点选选框(checkbox)直接点submit键即弹出该alert窗口。

如何判断checkbox是否被选中


第二种情况:checkbox与submit键分布在两个不同的form里面