• 前端 -- 单选框内容影响复选框的隐藏与显示 附代码

    目录

    前言

    在网页中这类问题比较常见
    通过选择一个复选框或者下拉框的内容来改变另外一个复选框或者下拉框的内容（一个选项影响另外一个选项）

    以下内容主要做一个知识点的探讨，类似功能大同小异

    1. 页面展示

    假设一个网站增设不同权限，超级管理员是任何权限（默认选择）
    管理员是需要选择对应开放的权限

    需求：

    1. 选择超级管理员（默认给予所有权限）或普通用户（默认无权限）直接添加管理员即可
      在这里插入图片描述

    2. 选择管理员（需对应选择权限），会弹出管理权限对应进行打钩
      在这里插入图片描述

    2. 功能开发

    类似功能开发都有增删改查
    此处的界面展示只在增改这两处

    配合web开发，此处使用的是python web开发（此处使用到的后端功能也就是传输一个字段进行遍历，具体展示界面以及逻辑都是通过js进行书写）

    2.1 前端

    主要的核心函数，就是让其展示与不展示：

    $(document).ready(function () {
        $('.i-checks').iCheck({
        	// 通过复选框以及单选框的class类来触发这个函数
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',

			// 选择这个复选框的时候，执行如下内容
        }).on('ifChecked', function(event) {
            var name = $(this).attr("name");
            var value = $(this).val();
            if( name == "menu"){
                checkedMods.push(value);
            }else if( name == "usertype"){
				// 主要的核心代码，通过选择的值让其展示与不展示
                if(value == 2){
                    // 管理员
                    $('#div_menus').css('display', '');
                }else{
                    $('#div_menus').css('display', 'none');
                }
            }
        }).on('ifUnchecked', function(event) {
            if($(this).attr("name") == "menu"){
                var value = $(this).val();
                checkedMods.pop(value);
            }
        });
    });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    增加

    <!-- 界面的优化美化 --> 

<!-- 显示用户类型的前端单选框 --> 
<div class="form-group"><label class="col-sm-2 control-label">用户类型</label>

	<!-- 设置间距 --> 
    <div class="col-sm-10">
		
		<!-- user_types 是后端开发的一个字段（此处为python的一个字典），开发的时候需问后端传输的字段类型 --> 
        {% for key, value in user_types %}

		<!-- 此处是单选框，主要的i-checks 通过下面的函数引入-->
        <div class="radio i-checks">
            <label class=""> 
                <div class="iradio_square-green" style="position: relative;">
                    <input type="radio" name="usertype" checked="checked" value="{{ key }}" style="position: absolute; opacity: 0;">
                    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
                </div>
            <i></i> {{ value }} </label>
        </div>
        {% endfor %}

    </div>
</div>


<!-- 显示管理权限的前端复选框 --> 
<div id="div_menus" class="form-group" style="display: none"><label class="col-sm-2 control-label">管理权限</label>
    <div class="col-sm-10">
	
		<!-- fullmenu 这个字段同样是后端传输到前端的值 --> 
        {% for menu_item in fullmenu %}

		<!-- 此处是复选框，主要的i-checks 通过下面的函数引入-->
        <div class="checkbox i-checks">
           <label class="">
               <div class="icheckbox_square-green"  style="position: relative;">
                   <input type="checkbox" name="menu" value="{{menu_item.mod}}" style="position: absolute; opacity: 0;">
                   <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);">
                   </ins>
               </div> 
              <i></i> {{ menu_item.name }}
           </label>
        </div>
        {% endfor %}
    </div>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    修改界面

    <div class="form-group"><label class="col-sm-2 control-label">用户类型</label>
    <div class="col-sm-10">
        {% for key, value in user_types %}
        <div class="radio i-checks-type">
            <label class="">
                <div class="iradio_square-green" style="position: relative;">
                
                	<!-- 根据之前的值判断key是否选择来记忆 --> 
                	<!-- user为后端objects类，通过引入个别属性判断key  --> 
                    <input type="radio" name="usertype" value="{{ key }}" style="position: absolute; opacity: 0;" 
					{% if user.user_type == key %}checked{% endif %}>
					
                    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
                </div>
                <i></i> {{ value }}
            </label>
        </div>
        {% endfor %}
    </div>
</div>



<div id="div_menus" class="form-group"><label class="col-sm-2 control-label">管理权限</label>
    <div class="col-sm-10">
        {% for menu_item in fullmenu %}
        <div class="checkbox i-checks-menu"><label class=""> 
        
        	<div class="icheckbox_square-green" style="position: relative;">
        		<input type="checkbox" value="{{menu_item.mod}}" style="position: absolute; opacity: 0;" 
        		{% for perm in user.permissions %} 
        			{% if perm == menu_item.mod %} checked 
        			{% endif %} 
        		{% endfor %}>
        		<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
        	</div> 
        	
        	<i></i> {{ menu_item.name }} </label>
        	
        </div>
        {% endfor %}
    </div>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    如果只是展示学习效果，也可在前端定义一个字典
    类似如下：

    [{key: 'xx', value:x}, .....

    • 1

    2.2 后端

    为了更好的显示前后交互，特意将其前端遍历的字段放在后端

    通过增加user这个用户，传输的data通过ajax

    具体添加的函数

    @login_required
def adduser(request):
	# 通过ajax的传输数据获取字段值配对
    data = {'fullmenu': settings.NAV_MENU + [], 'user_types': settings.USER_TYPES }

	# 伪代码，返回前端的显示界面
    return 'account/adduser.html'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    管理权限的列表遍历主要通过如下取值
    在dev的配置文件中定义如下

    NAV_MENU = [
    {
        'mod': 'account',
        'name': u'账号管理',
        'submods': [
            ('alluser', u'管理员列表')
        ]
    },
    {
        'mod': 'project',
        'name': u'xx 项目',
        'submods': [
            ('project', u'项目概览'),
        ]
    },
	....
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    用户类型主要通过如下取值：

    USER_TYPES = {
    1: u'超级管理员',
    2: u'管理员',
    3: u'普通用户'
}

    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    prompt提示词：AI英语词典优化版Pro，让AI教你学英语，通过AI实现一个网易有道英语词典
    云原生周刊：Linkerd 发布 v2.14 | 2023.9.4
    一、C#—概述环境安装（1）
    Excel·VBA工作表导出为图片
    第57篇：创建Nios II工程之Hello_World＜三＞
    STM32基于HAL库RT-Thread Demo测试
    【论文复现】——基于多尺度虚拟网格与坡度阈值的机载LiDAR 点云滤波方法
    第15章Linux之JavaEE定制篇-搭建JavaEE环境
    串口触摸屏的键盘控制
    Linux系统Vscode终端中文乱码解决
  • 原文地址：https://blog.csdn.net/weixin_47872288/article/details/126233925