全选,反选,全不选

全选,反选,全不选

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选,反选,全不选</title>
<head></head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function(){
        $("#CheckedAll").click(function(){
            if(this.checked){
                $('input[type=checkbox][name=items]').attr("checked",true);
            }else{
                $('input[type=checkbox][name=items]').attr("checked",false);
            }

        });
        $('input[type=checkbox][name=items]').click(function(){
            var flag=true;
            $('input[type=checkbox][name=items]').each(function(){
                if(!this.checked){
                    flag=false;
                }
            });
            if(flag){
                $('#CheckedAll').attr('checked',true);
            }else{
                $('#CheckedAll').attr('checked',false);
            }

        })
        $("#send").click(function(){
            var str = "你选中的爱好:\r\n";
            $('input[type=checkbox][name=items]:checked').each(function(){
                str+=$(this).val()+'\r\n';
            });
            alert(str);
        });
    });
</script>
<body>
 
<form>
   你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input type="button" id="send" value="提 交"/> 
</form>
 
</body>
</html>

posted on 2014-07-18 09:54  森林行走  阅读(192)  评论(0编辑  收藏  举报

导航