自定义复选框样式及全选操作

自定义复选框样式

复选框结构

　　input框去其样式宽高为0;定位到父盒子内，我们需用其：checked 属性

　　下面的span为自定义样式，定位到父盒子内

、

效果展示

js 代码

　　模拟复选框样式

$(".ck_MN").click(function(){     var ck_Inp = $(this).siblings(".ckIpt");     var Ck_box = $(this).parents(".Ckbox");    if(ck_Inp.prop("checked")){         //没有选中         $(this).removeClass("Nicon-cked");         ck_Inp.removeProp("checked");     }else{        //选中         $(this).addClass("Nicon-cked");         ck_Inp.prop("checked","checked");     } })

全选 反选 控制　　需先做单独的全选 反选控制所有　　再做以下判断 如有一个没有选中 那么全选按钮不选中
时间： 2024-10-19 11:34:07

自定义复选框样式及全选操作的相关文章

js 全选选框与取消全选代码

设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script> var a=document.getElementById("a"); var b=document.getElementsByClassName("b"); //全选与取消全选 var y=true; a.onchange=function(){ if(a.c

实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. 1 public partial class Form1 : Form 2 { 3 public Form1() 4 { 5 InitializeComponent(); 6 } 7 8 private Rectangle checkBoxColumnHeaderRect = Rectangle.Empty; 9 private GridColumn checkBoxColumn = null; 10 privat

html,javaScript中怎么控制复选框checkbox的全选，全不选，以及全选中，全选按钮选中，其中一个或者多个没选，则全选按钮不被选中

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ include file="/commons/jsp/htmtag.jsp"%> <html><head> <meta http-equiv="Content-Type"

layui 复选框checkbox 实现全选全选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> &l

纯CSS自定义Html中Checkbox复选框样式

原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观. 要做到这一点需要添加一段代码到你的CSS文件中. /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有

移动开发不能不知道的事- css3复选框样式自定义

样式化复选框(Styling Checkbox) 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态  未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图: blue.png 在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能

CSS定义Radio单选项和Checkbox复选框样式有效代码

我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的,下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式,有需要了解的朋友可参考. 完全使用css来实例 复制代码 代码如下: <style type=”text/css”> form#form1 {font:12px tahoma,sans-serif} input[type="checkbox"] {visibility:hidden;width:0;height

单选框，多选框样式

主要注意before和after的样式设置,input要设置id,label要设置for值并且等于相应的input值的id HTML <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> html,body{font-size: 14px;color: #555555;font-family: "

Jq 复选框、单选框取值操作、面板切换、cook

今天遇到这么几个问题: 1.$().map(); map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 2 选择器(: >) :是指定type  :input <input>元素 .radio  type="radio"的元素3.$('div :checkbox').each(function (){}) 就是遍历 div获取的每个值5.Jq只能用一次,就哟不了-->(只能触发一次单击事件) 我的循环使用调用2.0估计就