码迷,mamicode.com
首页 > Web开发 > 详细

jquery全选、反选、全不选

时间:2015-12-08 08:44:49      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

jquery全选、反选、全不选简单实现

Jquery代码

!function ($) {
    //全选 反选 全不选
    $("#selAll").click(function () {
        $(".lists :checkbox").not(‘:disabled‘).prop("checked", true);
    });
    $("#unSelAll").click(function () {
        $(".lists :checkbox").not(‘:disabled‘).prop("checked", false);
    });
    $("#reverSel").click(function () {
        //遍历.lists下的 checkbox;
        $(".lists :checkbox").not(‘:disabled‘).each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });
}(jQuery)

html

<input class="btn btn-default" id="selAll" type="button" value="全选" />
<input class="btn btn-default" id="unSelAll" type="button" value="全不选" />
<input class="btn btn-default" id="reverSel" type="button" value="反选" />
<div class="lists">
    <input type="checkbox" value="1" /> 苹果
    <input type="checkbox" value="2" /> 香蕉
    <input type="checkbox" value="3" /> 菠萝
    <input type="checkbox" value="4" /> 桃子
</div>

  

jquery全选、反选、全不选

标签:

原文地址:http://www.cnblogs.com/shouce/p/5028061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!