jQuery取消checkbox选中状态,一般是这样解决的
jQuery取消checkbox选中状态function box() {
$("#box").attr("checked", false);
}
但是在Ztree的组件里面,我们看到的勾选框并不是checkbox完成,而是使用了图片精灵,选中和未选中的状态里面是一张背景图片里面不同的定位~
主要代码
zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)
一个demo:
ztreeli {
list-style-type: none;
}
.ztree {
margin: 0;
padding: 5px;
color: #333;
width: 232px;
height: 259px;
border: 1px solid #000;
}
#boxRight {
border: 1px solid #000000;
width: 200px;
height: 259px;
position: absolute;
top: -7px;
left: 308px;
}
#toRight {
position: absolute;
top: 120px;
left: 256px;
}
.del {
color: red;
}
.group {
color: red;
}
>
提交
//树形菜单
var zTreeObj; //定义ztree对象
initTree(); //初始化ztree
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {
"Y": "s",
"N": "s"
}
},
view: {
selectedMulti: true,
showLine: false
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
pIdKey: "pId",
}
},
};
//请求数据
function initTree() {
$.get("data.json", function(data) {
console.log(JSON.stringify(data));
zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);
zTreeObj.expandAll(true);
});
}
//删除按钮和设为组长函数
function del() {
$('.del').click(function() {
debugger;
$(this).closest('li').remove();
var delId = '#' + $(this).closest('li').attr('id')
zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)
})
$('.group').click(function() {
if($('.group:contains("取消组长")').length > 0 && $(this).text() === '设为组长') {
alert("只能设一个组长")
return;
}
if($(this).text() === '设为组长') {
$(this).text('取消组长').parent().css('color', '#E44F4F')
} else {
$(this).text(
'设为组长').parent().css('color', '#000')
}
})
}
del();
//穿梭框左侧选中
$("#zTree").on('click', 'li.level1', function() {
//treenode_check
if($(this).hasClass('shuttleAct')) {
$(this).removeClass('shuttleAct');
} else {
$(this).addClass('shuttleAct');
}
});
//向右移动
$("#toRight").click(function() {
$('#boxRight').html("")
var arr = [] //循环找到右边已存在的id,把右边所有的id放在数组里面
$("#boxRight li").each(function(i, e) {
arr.push($(e).attr('id'))
})
var html = '';
$('span.checkbox_true_full').closest('li').each(function() {
if($(this).find('ul').length !== 0) {
return;
}
if(arr.indexOf($(this).attr('id')) > -1) {
return; //右侧有重复的id
} //在右边的数组里面寻找左边括号里面选中的id
html += '
';html += '' +
$(this).text() +
'设为组长';
html += '
';})
$('#boxRight').append(html)
//执行删除按钮和设为组长函数
del();
$("#boxRight li").removeClass('shuttleAct');
});
//提交所选中的状态,提交给后端
$("#btn").click(function() {
if($("#boxRight li").length < 3) {
alert("互监组至少三人");
return;
}
if($('.group:contains("取消组长")').length < 1) {
alert("必须设置互监组长")
return;
}
var params = {
groupName: $(".group:contains('取消组长')").prev('.name').text(),
criminals: checkNode()
}
alert(JSON.stringify(params))
$.ajax({
url: basePath + "/patrol",
contentType: 'application/json',
data: JSON.stringify(params),
type: "POST",
success: function(data) {}
});
})
//获取选中的人员
function checkNode() {
nodes = zTreeObj.getCheckedNodes(true);
var permTokens = new Array(); //创建list集合
var j = 0;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].token == "organ")
continue;
permTokens[j] = nodes[i].token + "," + nodes[i].name + "," + nodes[i].tId + "," + 0;
j++;
}
return permTokens;
}
json:
[
{
"id": null,
"pId": 1,
"name": "典韦212",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "D91D0DE952DE",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "马可波罗",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "EAFA6CCF3CDD",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "lkjTest",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "D69C2A3ACB30",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "DDDDD",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "DDDDDD",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "DDDDDF",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "EEEEEEE",
"type": 1
}, {
"id": 1,
"pId": 0,
"name": "王小婷",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 134,
"pId": 1,
"name": "技术部",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 137,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 138,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 139,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}
]