/**
* 曲成_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>
写一个控制table中checkbox的工具玩
最新推荐文章于 2021-01-12 09:13:40 发布