1. Contexte du problème
Le système utilise le plug-in zTree pour générer une arborescence de vérification déroulante, cliquez sur le texte pour cocher la case
2. Code source d'implémentation
<!DOCTYPE html> <html> <head> <title>zTree点击文字勾选复选框</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script> <script type="text/javascript"> $(document).ready(function(){ //初始化树 zTree = $.fn.zTree.init($("#treeSelect"), setting, datas); }); //设置 var setting = { check: { enable: true }, data: { simpleData: { enable: true } }, callback: { onClick: function (e, treeId, treeNode, clickFlag) { zTree.checkNode(treeNode, !treeNode.checked, true); } }, }, zTree; //数据 var datas =[ { id:1, pId:0, name:"树", open:true}, { id:11, pId:1, name:"松树", open:true}, { id:12, pId:1, name:"樟树", open:true}, { id:2, pId:0, name:"花", checked:true, open:true}, { id:21, pId:2, name:"梅花"}, { id:22, pId:2, name:"桃花", open:true} ]; </script> </head> <body> <p style="vertical-align: middle; text-align: center;"> <p> <ul id="treeSelect" class="ztree"></ul> </p> </p> </body> </html>
3. Résultat de la mise en œuvre
Ce qui précède est le contenu de zTree en cliquant sur le texte pour cocher la case, plus connexe Veuillez faire attention au site Web PHP chinois (www.php.cn) pour le contenu !