美文网首页
jQuery实现复选框的全选和全不选

jQuery实现复选框的全选和全不选

作者: 云鲸鱼rain | 来源:发表于2019-01-22 14:27 被阅读0次

    最近真是疯狂写js,作为一个java开发,在一个前后端不分离做系统的公司,用着bootstrap和freemarker,查着百度和问着前端同学。

    https://blog.csdn.net/qq_40087415/article/details/79248592 处学习。
    全选or不全选参考自以上链接。
    该博主写的十分详细,拿过来记录一下,方便之后用的时候好找。
    为了防止该博主删掉内容走掉,我复制一份过来...

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>jQuery实现复选框的全选和全不选</title>
        </head>
        <body>
            <label><input type="checkbox" name="checkall" />全选</label>
            <br><br>
            <label><input type="checkbox" name="checkbox" />复选框1</label>
            <label><input type="checkbox" name="checkbox" />复选框2</label>
            <label><input type="checkbox" name="checkbox" />复选框3</label>
            <label><input type="checkbox" name="checkbox" />复选框4</label>
            <label><input type="checkbox" name="checkbox" />复选框5</label>
            
            <!-- 引入jQuery官方类库 -->
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <!-- start 全选/全不选 -->
            <script type="text/javascript">
                $('input[name="checkall"]').on("click",function(){
                    if($(this).is(':checked')){
                        $('input[name="checkbox"]').each(function(){
                            $(this).prop("checked",true);
                        });
                    }else{
                        $('input[name="checkbox"]').each(function(){
                            $(this).prop("checked",false);
                        });
                    }
                });
            </script>
            <!-- end 全选/全不选 -->
        </body>
    </html>
    --------------------- 
    作者:Kevin_PB 
    来源:CSDN 
    原文:https://blog.csdn.net/qq_40087415/article/details/79248592 
    

    相关文章

      网友评论

          本文标题:jQuery实现复选框的全选和全不选

          本文链接:https://www.haomeiwen.com/subject/isbljqtx.html