jquery实现复选框全选反选

2024-04-27 15:01:55

字体：大中小

来源：转载

供稿：网友

实现原理：

　　给所有的复选框取相同的名字，当点击全选的时候把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>