JQ动态多选div（非Checkbox）

Posted 2022-03-22 小hu同学

写这篇文章是，今天项目中有使用到了一个多选盒子并且是非Checkbox的，，网上找了一圈都是说使用Checkbox来实现多选，我这里就简单说一下吧

需求：3个盒子 选中状态，来进行组合，根据后端的组合的值，前端传递给后端

后端给的判断是 ：

1. 选中晨 ：给他传值为1
2. 选中午 ：给他传值为2
3. 选中晚 ：给他传值为3
4. 选中 晨+午： 给他传值为4
5. 选中 晨+晚：给他传值为5
6. 选中 午+晚：给他传值为6
7. 都选中：给他传值为0

一、div结构

盒子的大致样式就是外面一个大盒子 里面3个小盒子

		 <div class="con">
                <div class="con-title">
                    * 类型
                </div>
                <div class="flex tab">
                    <div class="tab-c MornAfterEven" >晨</div>
                    <div class="tab-c">午</div>
                    <div class="tab-c">晚</div>
                </div>
            </div>
        
        <!-- 确定按钮 提交事件-->    
		<button id="determine">确定</button>

二、css样式

 	.con 
            padding: 0.45rem 0.7rem;
            box-sizing: border-box;
            border-bottom: 0.01rem solid #F0F0F0;
        
        .con select 
            width: 2rem;
            height: 0.4rem;
            font-size: 0.24rem;
            color: #4B4B4B;
        
        .con-title 
            color: #108DD7;
            font-size: 0.28rem;
            margin: 0 0 0.2rem;
        
        .tab > div 
            width: 1.4rem;
            height: 0.5rem;
            border-radius: 0.15rem;
            background-color: #f6f6f6;
            text-align: center;
            line-height: 0.5rem;
            color: #4B4B4B;
            font-size: 0.24rem;
            cursor: pointer;
        
		.flex
            display: flex;
            justify-content: space-between
        
  /*MornAfterEven 选中状态时的样式 */
        .MornAfterEven 
            background-color: #108DD7 !important;
            color: white !important;
        

三、js事件

我是引入了JQ文件来操作Dom，别问为什么要使用Jq，问就是要兼容 IE ！！！

	//获取tab-c这个元素 添加点击事件
$('.tab-c').click(function()

   // hasClass() 方法检查被选元素是否包含指定的 class。
   // 获取当前this（当前点击的是哪个盒子）,判断当前的this，有没有MornAfterEven这个样式
   //  有就删掉removeClass，没有就添加 addClass
$(this)[$(this).hasClass('MornAfterEven') ? 'removeClass' : 'addClass']('MornAfterEven');
)
// -------------------------------------------------------------------------------
//以上的只是改变了样式

//当我们点击确定的时候，会将选中的值进行判断并且发送给后端

$('#determine').click(function() 
	//有可能会写的很冗余，但是为了看的懂
	
	//判断第一、二、三、个 是否被选中了，判断它的样式，并且赋值给变量
	//hasClass判断
	var tab1 = $('.flex.tab .tab-c:first-child').hasClass('MornAfterEven');
    var tab2 = $('.flex.tab .tab-c:nth-child(2)').hasClass('MornAfterEven');
    var tab3 = $('.flex.tab .tab-c:nth-child(3)').hasClass('MornAfterEven');

	//由于为0是全部，所以我这里让它默认值为 -1
	// 	time_label这个变量 是到时候要传递给后台的变量
	
	// 默认赋值给-1
    var time_label = -1; 
    // 判断类型晨 等于1
    if(tab1) 
        time_label = 1
    
    // 判断类型午 等于2
    if (tab2) 
        time_label = 2
    
    // 判断类型晚 等于3
    if (tab3) 
        time_label = 3;
    
    // 判断晨+午 等于4
    if (tab1 && tab2) 
        time_label = 4;
    
    // 判断晨+晚 等于5
    if (tab1 && tab3) 
        time_label = 5;
    
    // 判断午检+晚检 等于6
    if (tab2 && tab3) 
        time_label = 6;
    
    // 判断晨检+午检+晚检 全部勾选0
    if (tab1 && tab2 && tab3) 
        time_label = 0;
    
    // 当0小于1的时候 为return出去
    if (time_label < 0) return alert('请选择类型');
)

这个time_label 就是传给后端的值