// 树状选择器 //结构 var json = { '常州饲料厂': { '生产饲料部': null, '物流部':null }, '扬州饲料厂': { '生产饲料部': null, '物流部':null }, '无锡饲料厂': { '生产饲料部': null, '物流部':null }, '泰州饲料厂': { '生产饲料部': null, '物流部':null }, '苏州饲料厂': { '生产饲料部': null, '物流部':null }, }; //这里生成DOM function generate(json, par) { for (var attr in json) { var ele = document.createElement('li'); if (!json[attr]) ele.innerHTML = ' <input type="checkbox"></input>' + attr; else { ele.innerHTML = '<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>' + attr + '</span>'; var nextpar = document.createElement('ul'); ele.appendChild(nextpar); generate(json[attr], nextpar); } par.appendChild(ele); } } generate(json, document.getElementById('container')); //处理展开和收起 function toggle(eve) { var par = eve.parentNode.nextElementSibling; if (par.style.display == 'none') { par.style.display = 'block'; eve.className = 'switch-open'; } else { par.style.display = 'none'; eve.className = 'switch-close'; } } //处理全部勾选和全部不选 function checkChange(eve) { var oul = eve.parentNode.nextElementSibling; if (eve.checked) { for (var i = 0; i < oul.querySelectorAll('input').length; i++) { oul.querySelectorAll('input')[i].checked = true; } } else { for (var i = 0; i < oul.querySelectorAll('input').length; i++) { oul.querySelectorAll('input')[i].checked = false; } } }