jquery实现复选框全选反选

12/6/2015来源:Javascript教程人气:947

实现原理:

  给所有的复选框取相同的名字,当点击全选的时候把chenked属性全部设置为true;当点击全不选的时候把checked属性设置为false;

源代码如下:

html代码:

<form method="post" action="">
你的爱好是:<input type="checkbox" id="CheckedAll" />全选/全不选
<br />
<input type="checkbox" name="one" value="唱歌" />唱歌
<input type="checkbox" name="one" value="跳舞" />跳舞
<input type="checkbox" name="one" value="看书" />看书
<input type="checkbox" name="one" value="运动" />运动
<br />
<input type="button" id="send" value="提交" />
</form>

 

js代码:

<script type="text/javascript">
    $(document).ready(function(){    
            $("#CheckedAll").click(function(){
                if (this.checked){    
                    $("[name=one]:checkbox").attr("checked",true);
                    }else{                            
                    $("[name=one]:checkbox").attr("checked",false);    
                        }        
        /*        $("[name=checkboxt]:checkbox").attr("checked",this.checked);*/
                });
    $("#send").click(function(){
        var str ="你的爱好是:\r\n";
        $("[name=one]:checkbox:checked").each(function(){            
            str+=$(this).val()+"\r\n";            
            });    
        alert(str);        
        });        
        });
</script>