jQuery取消checkbox选中状态，一般是这样解决的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery取消checkbox选中状态</title> </head> <body> <input type="button" value="取消" onclick="box();" /> <input type="checkbox" checked="checked" id="box" /> </body> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script> function box() { $("#box").attr("checked", false); } </script> </html>
但是在Ztree的组件里面，我们看到的勾选框并不是checkbox完成，而是使用了图片精灵，选中和未选中的状态里面是一张背景图片里面不同的定位~
主要代码
zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, tr
一个demo:
<!DOCTYPE html> <html> <head> <title>ztree</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" /> <link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" /> <style> li { 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; } </style> <script src="js/jquery-2.1.1.min.js"></script> <script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script> <script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script> <script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script> </head> <body> <ul id="zTree" class="ztree"> </ul> <button id="toRight">></button> <li class="shuttleBox near"> <ul id="boxRight"> <!--<span class="del">删除</span>马可波罗<span class="group">设为组长</span>--> </ul> </li> <button id="btn" type="submit">提交</button> </body> <script type="text/javascript"> //树形菜单 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 += '<li id="' + $(this).attr('id') + '">'; html += '<span class="del" ><img src="img/dateDel.png" /></span><span class="name">' + $(this).text() + '</span><span class="group">设为组长</span>'; html += '</li>'; }) $('#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; } </script> </html>json: [
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 } ]
