选中多选框时改变相对应的包裹复选框的元素样式

首先 有这样的一个效果:

即选中复选框的时候,相对应的li将改变背景色等样式,完整的实现效果主要代码如下

原始html文件

<div class="check">
            <h5>症状(可多选)</h5>
            <ul class="flex">
              <li class="radius">
                单颗牙缺失<input name="症状" type="checkbox" value="单颗牙缺失" class="checkbox"></li>
               <li class="radius">
               多颗牙缺失<input name="症状" type="checkbox" value="多颗牙缺失" class="checkbox"></li>
              <li class="radius">
                前牙缺失<input name="症状" type="checkbox" value="前牙缺失" class="checkbox"></li>
               <li class="radius">
                后牙缺失<input name="症状" type="checkbox" value="后牙缺失" class="checkbox"></li>
                 <li class="radius">
                  半口牙缺失<input name="症状" type="checkbox" value="半口牙缺失" class="checkbox"></li>
                 <li class="radius">
                   全口牙缺失<input name="症状" type="checkbox" value="全口牙缺失" class="checkbox"></li>
            </ul>
          </div>

js部分(主要)

$(".checkbox").click(function(){
              if($(this).is(":checked")){
                $(this).parent().addClass("on");
                      }else{
                        $(this).parent().removeClass("on");
                      }
                });

复选框样式css部分

.check{width: 100%;position: relative;}
.check h5{width: 50%; font-size: 2.2rem;position: relative;margin-bottom: 2%;color: #8d8c8c;}
.check h5::after{display: block;content: ‘*‘;position: absolute;color: #ff0000;top:0;left: 50%;}
.check ul{width: 100%;margin: 0 auto;}
.check ul li{width: 42.76%;font-size: 2.6rem;color: #2a2a2a;text-align: center;padding: 2% 0;border: 2px solid #d2d2d2;margin-bottom: 4%;background: #fff;position: relative}
.check ul li.on{background: #f85959;color: #fff;border-color: #f85959}
.check input{-webkit-appearance:checkbox!important;}

以上来源于原始网页:http://3g.hm-dental.com/zt/zzyxxl

原文地址:https://www.cnblogs.com/tryall-power/p/10148110.html

时间: 2024-11-14 12:20:07

选中多选框时改变相对应的包裹复选框的元素样式的相关文章

在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值

html端代码: 适用人群: <input type="checkbox" name="crowd" value="幼儿">幼儿 <input type="checkbox" name="crowd" value="青少年">青少年 <input type="checkbox" name="crowd" value=&

elementUi-复选框,使用v-for循环出来的复选框,默认多个值为勾选状态

1. 使用 v-model="BottomSelectFor[index].tick" 绑定要默认勾选的状态 2.在数组中定义 tick:true,没有的字段默认为false 3.实现效果 原文地址:https://www.cnblogs.com/wuhefeng/p/11316876.html

Web前端之复选框选中属性

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解.翻译的目的一是分享给大家,二是方便自己查阅.原文链接是:http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.

读取被选中的单选框和复选框中的内容

#include <windows.h>   LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);   HINSTANCE hInst;   /* The 'main' function of Win32 GUI programs: this is where execution starts */ int WINAPI WinMain(     HINSTANCE hInstance,     HINSTANCE hPrevInstanc

jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便,但是获取复选框和单选按钮的值确比较麻烦. 今天闲来无事封装了一个函数,以后获取复选框和单选按钮的值就只需要调用这个函数,传入jquery选择器就可以了,下面附上函数. 函数 /** * 获取单个或一组输入元素的选中项 * 传入Jquery选择器 * 支持:text,返回:文本 * 支持:hidden

php 判断复选框checkbox是否被选中

php 判断复选框checkbox是否被选中 复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考一下本文章的实例. 本文章向大家介绍两个知识点: php表单提交如何获取复选框checkbox的值 php如何判断复选框checkbox中的值是否被选中 下面我们分别对这两个知识点进行讲解: 1.php如何获取复选框checkbox的值 首先我们来创建一个表单: <form action ="Ha

php判断复选框是否被选中的方法

1.php如何获取复选框checkbox的值 首先我们来创建一个表单: 1 <form action ="HandleFormCheckBox.php" method="post"> 2 3 <ul> 4 5 <li><input type ="checkbox" name ="category[]" value ="php">php教程</li>

js获取checkbox复选框获取选中的选项

js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现: var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field);

【JavaScript】复选框的全选、反选,判断哪些复选框被选中

复选框的全选.反选,判断哪些复选框被选中,这个功能不难做, 利用document.getElementsByName("xxx");能够轻易实现,注意其返回值是一个节点数组便是了. 不过这功能对于用户来说是非常贴心的.下面举一个例子还说明这个问题. 首先是以下的布局: HTML代码如下,非常简单,三个按钮,分别设置其onclick事件所对应处理的javascript函数. 之后有四个复选框,注意设置其统一的name值,形成一个节点数组.以便被后续的document.getElement