关于 checkbox 的一些操作
获取checkbox选中的状态
$("#checkbox").is(":checked");
设置 checkbox 的状态
$("#checkbox").attr("checked", true);//设置为选中状态
$("#checkbox").attr("checked", false);//设置为未选中状态
用css对checkbox进行样式修饰
这是效果图
<div class="checkbox" style="height: 21px;">
<input id="remember" type="checkbox" name="">
<label for="remember"></label>
</div>
.checkbox {
height: 21px;
line-height: 21px;
font-size: 13px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.checkbox input[type="checkbox"] {
opacity: ;
z-index: ;
width: 20px;
height: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
left: -13px;
top: -13px;
margin-left: -14px;
border: 1px solid #cccccc;
border-radius: 3px;
-webkit-transition: border .3s ease-in-out, color .3s ease-in-out;
-o-transition: border .3s ease-in-out, color .3s ease-in-out;
transition: border .3s ease-in-out, color .3s ease-in-out; } .checkbox label::after {
content: '';
position: absolute;
left: -21px;
top: -12px;
width: 6px;
height: 12px;
border: ;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transition: border .3s ease-in-out, color .3s ease-in-out;
-o-transition: border .3s ease-in-out, color .3s ease-in-out;
transition: border .3s ease-in-out, color .3s ease-in-out;
}
.checkbox input[type="checkbox"]:checked + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-color: #4d8bfc;
border-color: #4d8bfc;
} .checkbox input[type="checkbox"]:checked + label::after {
background-color: #4d8bfc;
}
关于 checkbox 的一些操作的更多相关文章
- jquery radio、 checkbox、 select 操作
转载:http://www.haorooms.com/post/checkandselect $("input[id^='code']");//id属性以code开始的所有inpu ...
- angularjs checkbox 框的操作
前言:今天遇到一个问题,需要对多选按钮进行操作,作为js菜鸟,只能做自己慢慢琢磨了-- <label class="checkbox-inline custom-checkbox no ...
- jQuery对checkbox的各种操作
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1.根据id获取checkbox $("# ...
- 获取checkbox 的选中状态的id、checkbox的一些操作
var id_array=new Array(); $('input[name="id"]:checked').each(function(){ id_array.push($(t ...
- 【js】操作checkbox radio 的操作总结
摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...
- jQuery判断checkbox是否选中?操作checkbox(不)选中?
HTML <form action=""> <input type="checkbox" name="c ...
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...
- gridview+checkbox的各种操作【转】
来源:http://hi.baidu.com/heavensxq/item/29736dcfbdc30403c710b2b1 1.首先如何在gridview中加入一个checkbox,注意不是chec ...
- jq实现对checkbox的常用操作
场景1:点击checkbox 其他checkbox被选中的都取消 (意思是只能选中一个checkbox) function fn(obj,event){ //obj就是这个this这个对象 ,eve ...
- 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...
随机推荐
- python property(不动产)方法
class Test(object): @property def test(self): return 100 @test.setter def test(self): return "修 ...
- SpringCloud大白话之服务注册中心
SpringCloud-Eureka白话说明 eureka.client.register-with-eureka 属性表示是否将自己注册到Eureka Server, 默认为true. 由于当前应用 ...
- 第三篇,ajax 和 axios、fetch的区别
1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...
- Linux find命令:在目录中查找文件(超详解)
find 是 Linux 中强大的搜索命令,不仅可以按照文件名搜索文件,还可以按照权限.大小.时间.inode 号等来搜索文件.但是 find 命令是直接在硬盘中进行搜索的,如果指定的搜索范围过大,f ...
- IDEAVIM 常用快捷键总结和使用说明
---title: ideavim常用快捷键总结和使用tags: grammar_cjkRuby: true--- #### `待办` ideavim用于编程的常用快捷键说明 常用快捷键 插入(光标前 ...
- rancher说明为什么需要按照指定版本安装以及rancher和节点linux环境配置-docker指定版本安装
rancher说明为什么需要按照指定版本安装以及rancher和节点linux环境配置-docker指定版本安装 待办 https://blog.csdn.net/CSDN_duomaomao/art ...
- java基础(七)之子类实例化
知识点;1.生成子类的过程2.使用super调用父类构造函数的方法 首先编写3个文件. Person.java class Person{ String name; int age; Person() ...
- 题解 UVA1335 【Beijing Guards】
UVA1335 Beijing Guards 双倍经验:P4409 [ZJOI2006]皇帝的烦恼 如果只是一条链,第一个护卫不与最后一个护卫相邻,那么直接贪心,找出最大的相邻数的和. 当变成环,贪心 ...
- 密码学笔记——eval(function(p,a,c,k,e,d) 加密破解
密码学笔记——eval(function(p,a,c,k,e,d) 的加密破解 例题: 小明某天在看js的时候,突然看到了这么一段代码,发现怎么也理不出代码逻辑,你能帮帮他吗? 格式:SimCTF{} ...
- php 填写pdf 表单
最近接到新的任务,要求把pdf的文档,编辑后发邮件 首先pdf表单提交,需要用到这个东西pdftk,GitHub地址:https://github.com/mikehaertl/php-pdftk 首 ...