checkbox样式 | 易学教程

纯CSS3美化 input 的checkbox 和 radio

阅读更多关于纯CSS3美化 input 的checkbox 和 radio

magic-input CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo 源码： https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css 或者 dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用 Stylus 你就可以使用 magic-input.styl 文件 <link rel="stylesheet" type="text/css" href="dist/magic-input.min.css"> Checkbox iPhone 的样式 <input type="checkbox" class="mgc-switch mgc-sm" checked /> <input type="checkbox" class="mgc-switch" /> <input type="checkbox" class="mgc-switch mgc-lg" checked /> Checkbox <input type="checkbox" class="mgc" checked/> Default <input type="checkbox" class="mgc mgc

纯css写单选框和复选框的样式和功能

阅读更多关于纯css写单选框和复选框的样式和功能

只用纯css写的单选框和复选框的样式和功能该怎么写？看这里，复制下面的代码运行一遍就知道了，快试试吧！效果截图： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <title>移动单选按钮</title> <link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css"> <style> /*纯CSS写法*/ .checkbox-group input{display:none;opacity:0;} .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label { line-height: 1; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;

自定义 checkbox 和 radio

阅读更多关于自定义 checkbox 和 radio

在页面中我们经常会使用到 checkbox 和 radio，但是，部分浏览器显示的效果并不能让我们满意，因此想通过一种方式，更改其样式。这里使用到的就是使用 label，结合 before 实现样式的更改。完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定制checkbox 与 radio</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-size: 1rem; } main { padding: 100px; display: flex; align-items: center; } input[type=checkbox], input[type=radio] { display: none; } input[type=checkbox]+label, input[type=radio]+label { margin-right: 10px; text-align: center; cursor: pointer; display:

Web前端基础——jQuery（二）

阅读更多关于 Web前端基础——jQuery（二）

一、jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中 var arr=[1,3,5,7,9]; arr=$.map(arr,function(item){ return item*10; }); alert(arr); [10,30,50,70,90]; //上例是将数组中的每个元素乘10,然后返回新的数组 2) $.each(Array,fn); 对数组中的每个元素,调用fn这个函数进行处理,但是,没有返回值,比上例更常用 //例一 var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"]; $.each(nameList,function(key,value){ //对于上面的数组来说,key就是索引,value就是元素值 alert(key+":"+value); }); //例二 var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"}; $.each(nameList,function(key,value){ alert(key+":"+value); }); /

前端基础之jQuery入门 01

阅读更多关于前端基础之jQuery入门 01

jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more." 优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。4

jQuery 入门

阅读更多关于 jQuery 入门

不能正常引用jQuery-2.2.4.min.js所以代码没生效 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 官网: 点击中文文档: 点击书写规范 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> //代码不能写在引用文件这个容器里 <script> $somecode //$符号就表示jQuery jQuery.somecode //等同 </script> PS:由于编辑器的JS编码问题中文在js编码过程中没有使用utf-8.显示乱码.实际代码和注释源码有区别选择器和筛选器类似JS有#id(id选择器),element(元素选择器即标签),class(class选择器),组合选择器(selector多种选择器组合),层级选择器,*(选择全部)... 基本选择器在js基础上稍微修改了一下,是用#代表id, .class代表class,标签直接使用标签名 PS:id选择器,使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[]^`{|}~）作为名称的文本部分，

jQuery

阅读更多关于 jQuery

表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子： $(":checkbox") // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子：找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签找到被选中的option： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option 链式操作：每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。筛选器方法下一个元素： $("#id").next()　

jQuery基础知识

阅读更多关于 jQuery基础知识

表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子: $(':checkbox') // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子: 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签找到被选中的option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的optio 筛选器方法下一个元素: $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个元素: $("

Day49 前端知识之jQuery

阅读更多关于 Day49 前端知识之jQuery

一.jQuery介绍　　1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库　　2.jQuery使用户能够方便的处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大地简化JavaScript编程,它的宗旨是:Write less,do more. 二.jQuery优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

checkbox设置单选

阅读更多关于 checkbox设置单选

http://blog.sina.com.cn/s/blog_4550f3ca010137td.html $("*") ‘表示获取所有对象 $("#XXX") ’获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） $("input[name='username']") 获得input标签中name='userName'的元素对象 $(".abc") ' 获得样式class的名字是.abc的元素对象 $("div") ' 标签选择器选择所有的div元素常用 $("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素 $("#a .b p") 'ID号是a的并且使用了 b样式的所有的p元素 checkbox设置单选， http://bbs.csdn.net/topics/310186895 <input type="checkbox" name="check" onclick="checkCanel(this)" />A <input type="checkbox" name="check" onclick="checkCanel(this)" />B <input type="checkbox" name="check" onclick="checkCanel(this)"/>C function

订阅 checkbox样式