easyui前端实现多选框_easyui combobox复选框多选完整功能实现

前言：前端项目用的easyui，要实现下拉框多选，带有复选框全选全不选功能，可奈何easyui combobox原来就没有复选框Σ( ° △ °|||)︴，百度一堆文章实现的也都缺胳膊少腿的，用到的方法如getEl(target, value)，在我这项目里也不能用，然后就有了这篇文章，是通用实现，而且功能实现的相对完整。

先放效果图：

当选中全选的时候勾选所有选项，取消选中全选的时候则取消勾选所有选项，而且实现了选项1到选项6只要有一个是非选中状态，那全选就不会是选中状态。

下面是具体实现代码：

页面代码

下面实现复选框功能的js代码

/**

* 带有复选框的easyui下拉框工具方法

* @param _id input标签的id

* @param optionsJson json字符串，定义选项的内容，

* 例子：

* [

* {id: '对应于option标签的value', text: '页面显示文本'}

* ]

* @param hight 下拉框高度

*/

function combobox_checkbox(_id, optionsJson, hight) {

$('#'+_id).combobox({

data: optionsJson,

valueField: 'id',

textField: 'text',

panelHeight: hight,

multiple: true,

editable: false,

formatter: function (row) { // formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法

var opts = $(this).combobox('options');

return '' + row[opts.textField]

},

onLoadSuccess: function () { // 下拉框数据加载成功调用

// 正常情况下是默认选中“所有”，但我想实现点击所有全选功能，这这样会冲突，暂时默认都不选

$("#"+_id).combobox('clear'); //清空

// var opts = $(this).combobox('options');

// var values = $('#'+_id).combobox('getValues');

// $.map(opts.data, function (opt) {

// if (opt.id === '') { // 将"所有"的复选框勾选

// $('#'+opt.domId + ' input[type="checkbox"]').prop("checked", true);

//