全选反选表单操作

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>doc测试学习</title>
    <script  src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        input:focus{
            background:#234567;
            color:#fff;
        }
    </style>
</head>
<body>
    <form>
        你爱好的运动是 <br/>
        <input type="checkbox" name="items" value="足球" checked>足球
        <input type="checkbox" name="items" value="羽毛球">羽毛球
        <input type="checkbox" name="items" value="游泳">游泳
        <input type="checkbox" name="items" value="跳舞">跳舞
        <input type="button" id="checkall" value="全选">
        <input type="button" id="checkno" value="全不选">
        <input type="button" id="checkrev" value="反选">

    </form>
    

<script >

$(function(){

    $('#checkall').click(function(){
        $('[name=items]:checkbox').attr('checked',true);
    });
    $('#checkno').click(function(){
        $('[name=items]:checkbox').attr('checked',false);
    });
    $('#checkrev').click(function(){
        $('[name=items]:checkbox').each(function(item){
            // $(this).attr('checked',!$(this).attr("checked"));
            this.checked = !this.checked;//!非运算符 用js的方法更简洁
        });
    });
});


 </script>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容