前端单选框实现父／子级包函选项功能

来源：互联网发布：apache impala 编辑：程序博客网时间：2024/06/09 00:08

<html>
<head>
<title>用户列表</title>
<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   $("input").click(function(){
       var level = $(this).attr("level");

       if(level == 1){
           var str   = "_";
           var inputs = $('input[value*='+str+']');
           $(this).attr("checked") ? inputs.attr("checked", true) : inputs.removeAttr("checked");
       }
       else if(level == 2){
           var id = $(this).attr("id");
           var inputs = $('input[pid='+id+']');
           $(this).attr("checked") ? inputs.attr("checked", true) : inputs.removeAttr("checked");
       }
       else if(level == 3){

           var pid = $(this).attr("pid");
           var inputs = $('input[id='+pid+']');

           var ppid = inputs.attr("pid");
           var ppInputs = $('input[id='+ppid+']');

           var count = $('input[pid='+pid+'][checked]').length;

           if(count < 1){
               inputs.removeAttr("checked");
               ppInputs.removeAttr("checked");
           }
           else{
               inputs.attr("checked", true);
               ppInputs.attr("checked", true);
           }

       }
   })
})
</script>
</head>
<body>
<table border="1">
<tr>
   <td align="center">权限分配</td>
</tr>
<tr>
   <td align="left">给<span style="font-weight:bold;">[{$name}]</span>分配权限</td>
</tr>
<tr>
   <td>
       <foreach name="nodelist" item="vo">

           <p style="text-indent:{$vo['level']*20}px; <if condition='$vo[level] eq 3'>float:left;<else />clear:both;</if>">
               <input type="checkbox" id="{$vo.id}" <if condition="$vo.access eq 1">checked="checked"</if> name="access[]" value="{$vo.id}_{$vo.level}" pid="{$vo.pid}" level="{$vo.level}">
               <span><if condition="$vo['level'] eq 1">[项目]<elseif condition="$vo['level'] eq 2"/>[模块]</if></span>
               <lable name="name" value="{$vo.id}">{$vo.title}</lable>
           </p>
       </foreach>
   </td>
</tr>

</table>
</body>
</html>

0 0