如何判断checkbox是否被选中

最新推荐文章于 2024-06-26 16:10:56 发布

全名工作狂

最新推荐文章于 2024-06-26 16:10:56 发布

阅读量3.1k

点赞数

分类专栏： html 前端 Bootstrap JavaScript jQuery 文章标签： checkbox javascript html

本文链接：https://blog.csdn.net/voilethht/article/details/43489481

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

第一种情况：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" οnsubmit="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窗口。