写一个控制table中checkbox的工具玩

/**
 * 曲成_attack! 2016/11/14
 *
 * jquery版本3.1.1
 *
 * all_click()--全选checkbox点击事件,如果未全选便全选,如果已全选便全不选
 *
 * single_click()--单选checkbox点击事件
 *
 * get_entities()--true:选中的checkbox数组/false:未选中的checkbox数组
 *
 * get_checked_id()--获取选中或是未选的checkbox的对应的值.
 *
 * 使用:
 *       var cb = CheckboxArray.create("cb");
 *
 *        $('#all').click(function () {
 *           cb.all_click("all");
 *       });
 *
 *       $("table td").click(function () {
 *           cb.single_click("all");
 *       });
 *
 *       console.log(cb.get_checked_id(false, 'value'));
 *
 * 整体结构见结束部分
 */
var CheckboxArray = {
    create: function (name) {
        var ca = {};
        var id = "id";//调试使用
        //全选按钮事件响应
        ca.all_click = function () {
            var boo = true;
            var checked_total = $("input:checkbox[name=" + name + "]:checked").length;
            if (ca.size - checked_total === 0) {
                boo = false;
            } else {
                boo = true;
            }
            console.log(ca.get_checked_id(true, id));//调试
            console.log('at func all_click');
            ca.entities.prop("checked", boo);//改变全选checkbox的状态
        }
        //单选按钮事件响应
        ca.single_click = function (all_ctrl_id) {//全选checkbox的id
            var checked_total = $("input:checkbox[name=" + name + "]:checked").length;
            if (ca.size - checked_total === 0) {
                $('#' + all_ctrl_id).prop("checked", true);
            } else {
                $('#' + all_ctrl_id).prop("checked", false);
            }
            console.log('at func single_click');
            console.log(ca.get_checked_id(true, id));//调试
        }
        //通过传入布尔参数,获取响应的实体
        ca.get_entities = function (boo) {//要获取哪种状态的?true:false
            if (boo) {
                return $("input:checkbox[name=" + name + "]:checked");
            } else {
                return $("input:checkbox[name=" + name + "]").not("checked");
            }
            console.log('at func get_entities');
            console.log(ca.get_checked_id(boo, id));//调试
        }
        //选中的checkbox的属性值
        ca.get_checked_id = function (boo, what) {//参数1:哪种状态的?true:false.参数2:什么属性?id:value:name...
            var arr = new Array;
            var entities = ca.get_entities(boo);
            for (var i = 0; i < entities.length; i++) {
                if (what == 'id') {
                    arr.push(entities[i].id);
                }
                if (what == 'name') {
                    arr.push(entities[i].name);
                }
                if (what == 'value') {
                    arr.push(entities[i].value);
                }
            }
            return arr;
        }

        //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<以下是创建后持久化的,对于事件响应无意义
        //实体数量
        ca.size = $("input:checkbox[name=" + name + "]").length;
        //全部实体
        ca.entities = $("input:checkbox[name=" + name + "]");
        //选中的实体数量
        ca.checked_size = $("input:checkbox[name=" + name + "]:checked").length;
        //选中的实体
        ca.checked_entities = $("input:checkbox[name=" + name + "]:checked");
        //未选中的实体数量
        ca.no_checked_size = ca.entities.not("checked").length;
        //未选中的实体
        ca.no_checked_entities = ca.entities.not("checked");
        //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>以上是创建后持久化的,对于事件响应无意义
        return ca;
    }
};
// 整体结构如下:
// 要求:相同的name,不同的id
// <table>
// <tr>
// <td><input type="checkbox" id="all" name="all"></td>
// </tr>
// <tr>
// <td><input type="checkbox" id="cb1" name="cb" value="a1"></td>
// </tr>
// <tr>
// <td><input type="checkbox" id="cb2" name="cb" value="a2"></td>
// </tr>
// <tr>
// <td><input type="checkbox" id="cb3" name="cb" value="a3"></td>
// </tr>
// <tr>
// <td><input type="checkbox" id="cb4" name="cb" value="a4"></td>
// </tr>
// </table>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值