复选框 | 易学教程

复选框全选

阅读更多关于复选框全选

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>复选框</title> <style type="text/css"> </style> </head> <body> <input type="checkbox" id="boxid" οnclick="setAllNo()" />全选/全不选 <br /> <input type="checkbox" name="love" />篮球 <br /> <input type="checkbox" name="love" />排球 <br /> <input type="checkbox" name="love" />羽毛球 <br /> <input type="checkbox" name="love" />乒乓球 <br /> <input type="button" value="全选" οnclick="setAll()" /> <input type="button" value="全不选" οnclick="setNo()" /> <input type="button" value="反选" οnclick="setOthers()" /> <script type="text/javascript"> //全选/全不选操作 function

一行jQuery代码搞定checkbox 全选和全不选

阅读更多关于一行jQuery代码搞定checkbox 全选和全不选

在网站建设中；让复选框全部选中和全部取消是比较常用的；下面就介绍如何用一句话搞定全选功能；其实很简单；那就是使用盘点jQuery弃用的函数这篇文章中最后一段代码；好了，我要介绍的方法讲完了；好吧，别砸鸡蛋；我是开个玩笑；代码在下面 JavaScript部分： function checkAll(obj){ $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked')); } html部分： <div id="box"> <input type="checkbox" onclick="checkAll(this)">全选<br><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> </div> 本文为白俊遥原创文章,转载无需和我联系

超简单自定义单选框和复选框

阅读更多关于超简单自定义单选框和复选框

在很多时候，浏览器自带的单选框和复选框的样式不够美观，并且浏览器的样式之间带有差异。已经不足以我们生产的需求。下面用css来自定义修改一下单选框与复选框的样式。下面我是分享最简单的一种搞定自定义设置效果图首先定义需要设计的样式 .radio-item .radio { width : 15px ; height : 15px ; border : 1px solid #999 ; cursor : pointer ; display : inline-block ; box-sizing : border-box ; } 点击之后的样式 .radio-item input:checked+.radio { border-color : #008c8c ; } .radio-item input:checked~span { color : #008c8c ; } 设计好外表样式然受使用伪类进行设计里面的的样式这个可以自定义设计了 .radio-item input:checked+.radio::after { display : block ; font-weight : bold ; font-size : 24px ; font-family : Sans-serif ; background : transparent ; content : "√" ;

mui checkbox设置方形复选框样式

阅读更多关于 mui checkbox设置方形复选框样式

mui的官方文档上mui checkbox的样式是圆形样式，乍一看以为是单选框。查了一下，官方的回复是：设计理念以iOS 7为基础，借鉴部分Android系统特有控件；之前同时提供了圆形的checkbox和方形的checkbox，后来发现iOS上的圆形checkbox，大家都已习惯，因此就删掉了方形的checkbox。所以对于有方形checkbox有需求的小伙伴可以自己设置。 /* 更改checkbox样式*/ .mui-checkbox input[type=checkbox]:before { content: '\e413'; } .mui-checkbox input[type=checkbox]:checked:before { content: '\e443'; } .mui-checkbox.mui-left input[type=checkbox] { left: 0px; } 来源： CSDN 作者：腴i 链接： https://blog.csdn.net/ohdajing/article/details/103496175

一行jQuery代码搞定checkbox 全选和全不选

阅读更多关于一行jQuery代码搞定checkbox 全选和全不选

jQuery select操作控制方法小结

阅读更多关于 jQuery select操作控制方法小结

jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery设置Select选择的Text和Value: 语法解释： 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); //设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr(

复选框问题

阅读更多关于复选框问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style></mce:style><style mce_bogus="1"> </style> <title>JS获取复选框被选中的值</title> </head> <body> <input type="checkbox" name="test" value="0" />0 <input type="checkbox" name="test" value="1" />1 <input type="checkbox" name="test" value="2" />2 <input type="checkbox" name="test" value="3" />3 <input type="checkbox" name="test" value="4" />4 <input type="checkbox" name="test" value="5" />5 <input type="checkbox" name="test" value="6" />6 <input type="checkbox" name="test"

小博老师演示常用JQuery效果 ——复选框全选和反选效果

阅读更多关于小博老师演示常用JQuery效果 ——复选框全选和反选效果

[ 理论知识 ] 我们在实际开发应用程序的过程中，经常会遇到复选框全选和反选的效果需求，本文小博老师就为大家演示一下，如何使用 JQuery 框架实现复选框全选和反选的效果。 [ 步骤解读一 ] 界面布局首先我们创建一个HTML页面，核心代码如下： <body> <div align="center" id="div_document"> <div align="left" id="div_document_content"> <table align="center" border="1px" cellpadding="2px" cellspacing="2px"> <tr> <td><input type="checkbox" id="cbxAll" /></td> <td>课程名称</td> <td>课程时间</td> </tr> <tr> <td><input type="checkbox" name="cbxGroup" /></td> <td>JavaSE标准版</td> <td>160课时</td> </tr> <tr> <td><input type="checkbox" name="cbxGroup" /></td> <td>JavaWeb设计</td> <td>96课时</td> </tr> <tr> <td><input type=

Hbulider得前端基础_mui框架总结4_卡片视图&&消息框&&复选框

阅读更多关于 Hbulider得前端基础_mui框架总结4_卡片视图&&消息框&&复选框

顺便说一下,这段时间主要是把MUI框架的控件关键代码拿出来看一下,并把每个控件主要用到的地方说一下, 并把js也拿出来看一下,控件了解清楚了,然后写个webservice,就能进行数据交互了,后面的话会做一个项目 1.卡片视图主要用于图文详解一些详情 <div class="mui-content"> <div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 这是一个最简单的卡片视图控件;卡片视图通常用来显示完整独立的一段信息,比如一篇文章的预览图,作者信息,点赞数量等 </div> </div> </div> <div class="mui-card"> <div class="mui-card-header">页眉</div> <div class="mui-card-content"> <div class="mui-card-content-inner"> 包含页眉页脚的卡片,页眉通常用来显示面板标题,页脚通常用来显示额外的信息或者支持的操作(比如点赞,评论) </div> </div> <div class="mui-card-footer">页脚</div> </div> <div class="mui-card"> <div class=

MySQL安装教程

阅读更多关于 MySQL安装教程

MySQL安装分为Windows系统和Linux系统，本文以Windows为例来结束MySQL安装教程。需要 Linux系统的小伙伴可联系 Q：2833142073自取。本文摘自千锋教育高教产品研发部编著的《MySQL数据库从入门到精通》，如需转载，请标明来源，谢谢！ 1.1MySQL的下载登录https://dev.mysql.com/downloads/mysql/5.5.html#downloads，进入官网下载页面，如图1.3所示。基于Windows平台的MySQL安装文件有两个版本，一种是以.msi为后缀的二进制安装版本，一种是以.zip为后缀的压缩版本，如图1.4所示。这里以.msi的二进制版本为例讲解如何安装，根据电脑的操作位数，选择需要下载的安装文件，这里以64位的安装文件为例点击下载，下载完成后，安装文件如图1.5所示。 1.2MySQL的安装单击图中的“Next”按钮，此时会显示用户许可协议界面，如图1.7所示。将图1.7中的确认项勾选，然后点击“Next”按钮，如图1.8所示。图1.8中，显示了三种可选的安装类型，三种类型的含义具体如下。l Typical（典型安装）：只安装MySQL服务器、MySQL命令行客户端和命令行使用程序。 l Custom（自定义安装）：自定义安装的软件和安装路径。 l Complete（完全安装）

订阅复选框