【全选、全不选、反选】实例。。简单实用！

转载

mob6047570116b7 2014-08-12 20:57:00

文章标签 全不选 jquery html mysql 文章分类 MySQL 数据库

很简单实用的方法。

HTML:

<span>请选出您喜欢的水果？</span><br>
<form action="" class="fr">
<input type="checkbox" name="checkbox" value="橘子"><label>橘子</label>
<input type="checkbox" name="checkbox" value="香蕉"><label>香蕉</label>
<input type="checkbox" name="checkbox" value="梨子"><label>梨子</label>
<input type="checkbox" name="checkbox" value="苹果"><label>苹果</label>
<input type="checkbox" name="checkbox" value="柿子"><label>柿子</label>
<input type="checkbox" name="checkbox" value="椰子"><label>椰子</label>
<br>
<input type="button" id="checkAll" value="全选">
<input type="button" id="checkNo" value="全不选">
<input type="button" id="checkAllRev" value="反选">
</form>

Jquery:

　　$("#checkAll").click(function(){  //全选
        $("[name=checkbox]:checkbox").attr("checked",true);  //等价于  //$("[name=checkbox]:checkbox").attr("checked","checked");
    });

    $("#checkNo").click(function(){   //全不选
        $("[name=checkbox]:checkbox").attr("checked",false);
    });

　　$("#checkAllRev").click(function(){   //反选
        $("[name=checkbox]:checkbox").each(function(){
            this.checked=!this.checked;    //当已经选中时，则改为不选中的状态
        });

    });