CheckAll 全选
前言
如果是动态创建checkbox列表可使用axCheckbox插件并使用其内置方法进行全选或取消全选；但是如果是页面已存在checkbox列表，进行全选或取消全选则需要写不少js代码，为此开发了axCheckAll插件专门用于对已存在的checkbox列表进行全选或取消全选。
使用方法
插件运行方式有两种：
- ax*属性：对列表父层使用
axCheckAll属性，再配置checkDom即可按默认参数运行。 - js实例：通过
new axCheckAll('#ID',{checkDom:''})方式创建实例运行。
运行前需要注意如下节点结构：
- 1、checkbox列表中的input需要有相同的name名，而且每一项应该有value值
- 2、checkbox列表需要有一个父层包裹
- 3、切换全选和复选的切换按钮可以有三种形式，分别是两个radio按钮、一个checkbox开关按钮和两个普通按钮
-
<label class="ax-checkbox"><input type="checkbox" id="boxCheck"><u></u><i>全选</i></label> <span axCheckAll="checkDom:'#boxCheck'"> <label class="ax-checkbox"><input name="pen" value="1" type="checkbox"><u></u><i>军事类</i></label> <label class="ax-checkbox"><input name="pen" value="2" type="checkbox"><u></u><i>人物志类</i></label> <label class="ax-checkbox"><input name="pen" value="3" type="checkbox"><u></u><i>娱乐类</i></label> <label class="ax-checkbox"><input name="pen" value="4" type="checkbox"><u></u><i>财经类</i></label> </span> <div class="ax-break"></div> <label class="ax-checkbox"><input type="checkbox" id="jsCheck"><u></u><i>全选</i></label> <span id="jsOn"> <label class="ax-checkbox"><input name="apple" value="1" type="checkbox"><u></u><i>军事类</i></label> <label class="ax-checkbox"><input name="apple" value="2" type="checkbox"><u></u><i>人物志类</i></label> <label class="ax-checkbox"><input name="apple" value="3" type="checkbox"><u></u><i>娱乐类</i></label> <label class="ax-checkbox"><input name="apple" value="4" type="checkbox"><u></u><i>财经类</i></label> </span> -
new axCheckAll('#jsOn', { checkDom: '#jsCheck', });
按钮类型
切换按钮有三种类型，用法如下：
- 1、
checkbox类型（一个checkbox）。对于input使用id、className或name，参数checkDom需要填#id、.className、[name]或node节点对象。 - 2、
radio类型（两个radio）。两个radio需要使用相同的name名，全选的radio设置value为1，取消全选的radio设置value为0，参数checkDom需要填[name]。 - 3、
button类型（两个button）。需要同时设置checkDom和clearDom参数，参数checkDom和clearDom需要填#id、.className、[name]或node节点对象。
以上事例演示了checkbox的切换按钮方法，以下演示其余两个方法。
<label class="ax-radio"><input type="radio" name="listradio" value=1><u></u><i>全选</i></label>
<label class="ax-radio"><input type="radio" name="listradio" value=0><u></u><i>全不选</i></label>
<span axCheckAll="checkDom:'[listradio]'">
<label class="ax-checkbox"><input name="steet" value="1" type="checkbox"><u></u><i>军事类</i></label>
<label class="ax-checkbox"><input name="steet" value="2" type="checkbox"><u></u><i>人物志类</i></label>
<label class="ax-checkbox"><input name="steet" value="3" type="checkbox"><u></u><i>娱乐类</i></label>
<label class="ax-checkbox"><input name="steet" value="4" type="checkbox"><u></u><i>财经类</i></label>
</span>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<span axCheckAll="checkDom:'#checkBtn',clearDom:'#clearBtn'">
<label class="ax-checkbox"><input name="china" value="1" type="checkbox"><u></u><i>军事类</i></label>
<label class="ax-checkbox"><input name="china" value="2" type="checkbox"><u></u><i>人物志类</i></label>
<label class="ax-checkbox"><input name="china" value="3" type="checkbox"><u></u><i>娱乐类</i></label>
<label class="ax-checkbox"><input name="china" value="4" type="checkbox"><u></u><i>财经类</i></label>
</span>
<div class="ax-break"></div>
<a href="###" class="ax-btn" id="checkBtn">全选</a>
<a href="###" class="ax-btn" id="clearBtn">取消全选</a>
开关初始化
如果开关类型是checkbox或radio，可进行开关初始化，即加载完毕便实现全选。
具体方法是：对全选的input元素使用checked属性即可。
<label class="ax-radio"><input type="radio" name="switchradio" value=1 checked><u></u><i>全选</i></label>
<label class="ax-radio"><input type="radio" name="switchradio" value=0><u></u><i>全不选</i></label>
<span axCheckAll="checkDom:'[switchradio]'">
<label class="ax-checkbox"><input name="switch" value="1" type="checkbox"><u></u><i>军事类</i></label>
<label class="ax-checkbox"><input name="switch" value="2" type="checkbox"><u></u><i>人物志类</i></label>
<label class="ax-checkbox"><input name="switch" value="3" type="checkbox"><u></u><i>娱乐类</i></label>
<label class="ax-checkbox"><input name="switch" value="4" type="checkbox"><u></u><i>财经类</i></label>
</span>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<label class="ax-checkbox"><input type="checkbox" id="switchcheckbox" checked><u></u><i>全选</i></label>
<span axCheckAll="checkDom:'#switchcheckbox'">
<label class="ax-checkbox"><input name="old" value="1" type="checkbox"><u></u><i>军事类</i></label>
<label class="ax-checkbox"><input name="old" value="2" type="checkbox"><u></u><i>人物志类</i></label>
<label class="ax-checkbox"><input name="old" value="3" type="checkbox"><u></u><i>娱乐类</i></label>
<label class="ax-checkbox"><input name="old" value="4" type="checkbox"><u></u><i>财经类</i></label>
</span>
列表初始化
如果需要在加载完毕后对列表中某些checkbox项使用checked，同时联动开关按钮，只需要对列表中某些checkbox项使用checked属性即可完成列表初始化。
<label class="ax-radio"><input type="radio" name="initradio" value=1><u></u><i>全选</i></label>
<label class="ax-radio"><input type="radio" name="initradio" value=0><u></u><i>全不选</i></label>
<span axCheckAll="checkDom:'[initradio]'">
<label class="ax-checkbox"><input name="woman" value="1" type="checkbox"><u></u><i>军事类</i></label>
<label class="ax-checkbox"><input name="woman" value="2" type="checkbox" checked><u></u><i>人物志类</i></label>
<label class="ax-checkbox"><input name="woman" value="3" type="checkbox" checked><u></u><i>娱乐类</i></label>
<label class="ax-checkbox"><input name="woman" value="4" type="checkbox"><u></u><i>财经类</i></label>
</span>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<label class="ax-checkbox"><input type="checkbox" id="initcheckbox"><u></u><i>全选</i></label>
<span axCheckAll="checkDom:'#initcheckbox'">
<label class="ax-checkbox"><input name="man" value="1" type="checkbox"><u></u><i>军事类</i></label>
<label class="ax-checkbox"><input name="man" value="2" type="checkbox" checked><u></u><i>人物志类</i></label>
<label class="ax-checkbox"><input name="man" value="3" type="checkbox"><u></u><i>娱乐类</i></label>
<label class="ax-checkbox"><input name="man" value="4" type="checkbox"><u></u><i>财经类</i></label>
</span>
与axCheckbox结合
插件axCheckbox可创建checkbox列表，但是不会生成checked开关，而axCheckAll可为checkbox列表绑定checked开关，axCheckbox和axCheckAll天然的可组合使用。
要点之一是将axCheckbox实例的this.parent变量作为axCheckAll的目标节点。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input" id="plugincheckbox"></div> </div> </div> </div> <div class="ax-break"></div> <hr/> <div class="ax-break"></div> <label class="ax-radio"><input type="radio" name="pluginradio" value=1><u></u><i>全选</i></label> <label class="ax-radio"><input type="radio" name="pluginradio" value=0><u></u><i>全不选</i></label> -
let insCheckbox = new axCheckbox('#plugincheckbox', { children: [ { value: 'military', label: '军事类' }, { value: 'figure', label: '人物类' }, { value: 'literature', label: '文学类' }, { value: 'novel', label: '小说类' } ] }); new axCheckAll(insCheckbox.parent, { checkDom: '[pluginradio]', });
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.list：参与checked的checkbox列表this.listAvailable：在this.list中非禁用项列表this.toggleType：checked切换方式，字符串格式，有三种，分别是：checkbox、radio和buttonthis.toggleBtns：checked切换的按钮组，数组格式，如果是checkbox类型则this.toggleBtns.length=1，其他类型通常是2this.name：参与checked的checkbox列表的name名this.state：当前状态，字符串格式，有三种状态，分别是：cleared、checked和checking
内部操作方法如下：
this.getValues(type, separator)：获得checked列表的值，支持两个参数：- type：值类型，可填string或array，默认array
- separator：字符串类型值得分隔符，如果不填则取自options.separator，默认是英文逗号
this.checked(options, callback)：从checkbox列表中设置checked项，支持两个参数：- options：选项值，可以是字符串数组，也可以是用options.separator分隔符的字符串
- callback：回调函数，支持一参数，即值数组
this.checkAll(callback)：全部checkbox设置checked状态，支持回调函数，回调函数无参数this.clearAll(callback)：全部checkbox取消checked状态，支持回调函数，回调函数无参数
-
<div id="insM"> <label class="ax-checkbox"><input name="big" value="1" type="checkbox"><u></u><i>军事类</i></label> <label class="ax-checkbox"><input name="big" value="2" type="checkbox"><u></u><i>人物志类</i></label> <label class="ax-checkbox"><input name="big" value="3" type="checkbox"><u></u><i>娱乐类</i></label> <label class="ax-checkbox"><input name="big" value="4" type="checkbox"><u></u><i>财经类</i></label> </div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="mCheckAll">全选</a> <a href="###" class="ax-btn" id="mClearAll">取消全选</a> <a href="###" class="ax-btn" id="mChecked">设置若干项</a> <a href="###" class="ax-btn" id="mGetValues">获取值</a> -
let mCheckAll = document.querySelector('#mCheckAll'), mClearAll = document.querySelector('#mClearAll'), mChecked = document.querySelector('#mChecked'), mGetValues = document.querySelector('#mGetValues'), insM = new axCheckAll('#insM'); mCheckAll.onclick = () => { insM.checkAll(function () { console.log('全部checked了！'); console.log('当前状态：' + this.state); }); } mClearAll.onclick = () => { insM.clearAll(function () { console.log('全部取消checked了！'); console.log('当前状态：' + this.state); }); } mChecked.onclick = () => { insM.checked('2,3', function (values) { console.log('设置了值：'); console.log(values); console.log('当前状态：' + this.state); }); } mGetValues.onclick = () => { console.log(insM.getValues()); console.log('输出字符串值：' + insM.getValues('string')); }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit初始化后执行，无参数onChecked/checked对指定项checked后执行，支持一个参数，即当前值数组onCheckAll/checkAll对所有项checked后执行，无参数onClearAll/clearAll对所有项取消checked后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
基于以上“变量和操作方法”实例使用监听事件
-
<div id="insM"> <label class="ax-checkbox"><input name="big" value="1" type="checkbox"><u></u><i>军事类</i></label> <label class="ax-checkbox"><input name="big" value="2" type="checkbox"><u></u><i>人物志类</i></label> <label class="ax-checkbox"><input name="big" value="3" type="checkbox"><u></u><i>娱乐类</i></label> <label class="ax-checkbox"><input name="big" value="4" type="checkbox"><u></u><i>财经类</i></label> </div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="mCheckAll">全选</a> <a href="###" class="ax-btn" id="mClearAll">取消全选</a> <a href="###" class="ax-btn" id="mChecked">设置若干项</a> <a href="###" class="ax-btn" id="mGetValues">获取值</a> -
let mCheckAll = document.querySelector('#mCheckAll'), mClearAll = document.querySelector('#mClearAll'), mChecked = document.querySelector('#mChecked'), mGetValues = document.querySelector('#mGetValues'), insM = new axCheckAll('#insM'); mCheckAll.onclick = () => { insM.checkAll(function () { console.log('全部checked了！'); console.log('当前状态：' + this.state); }); } mClearAll.onclick = () => { insM.clearAll(function () { console.log('全部取消checked了！'); console.log('当前状态：' + this.state); }); } mChecked.onclick = () => { insM.checked('2,3', function (values) { console.log('设置了值：'); console.log(values); console.log('当前状态：' + this.state); }); } mGetValues.onclick = () => { console.log(insM.getValues()); console.log('输出字符串值：' + insM.getValues('string')); } //监听 insM.on('checked', (values) => { console.log('监听到当前设置值：' + values.join()); }).on('checkAll', (values) => { console.log('监听到已经全部checked！'); }).on('clearAll', (values) => { console.log('监听到已经全部取消checked！'); });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axCheckAll({
checkDom: '', //全选列表的按钮节点，可以是id、className、nodeName或者节点
clearDom: '', //取消全选列表的按钮节点，可以是id、className、nodeName或者节点，如果使用checkbox或radio进行全选，clearDom不填
separator: ',', //获取值转字符串值时的分隔符，默认为英文逗号
includeDisabled: true,//是否包含禁用项（disabled项），默认true即全部项，可选择false只使用可用项
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '', //回调函数，初始化后执行，无参数
onChecked: '', //回调函数，部分checked后执行，支持一个参数，即当前值数组
onCheckAll: '', //回调函数，全部checked后执行，无参数
onClearAll: '', //回调函数，全部取消checked后执行，无参数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"