js实现选中复选框文字变色的方法


Posted in Javascript onAugust 14, 2015

本文实例讲述了js实现选中复选框文字变色的方法。分享给大家供大家参考。具体如下:

这里实现选中复选框时,文字加上一个背景色,变通一下,还是很有用的。

运行效果如下图所示:

js实现选中复选框文字变色的方法

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>选中复选框文字变色</title>
<style>
.checkbox {
 background-Color:e-xpression(this.checked?'yellow':'buttonface');
}
</style>
</head>
<script>
function chaCloor(field){
var pig = field.checked;
pig?field.nextSibling.style.backgroundColor="skyblue":field.nextSibling.style.backgroundColor="white";
}
</script>
<body>
<table height=48 width=136>
<tr>
 <td><input type="checkbox" onClick="chaCloor(this)"><span>网页特效</span></td>
</tr>
<tr>
<td><input type="checkbox" onClick="chaCloor(this)"><span>源码下载</span></td>
</tr>
<tr>
<td><input type="checkbox" onClick="chaCloor(this)"><span>编程软件</span></td>
</tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 #Javascript
freemarker判断对象是否为空的方法
Aug 13 #Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 #Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 #Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 #Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 #Javascript
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python实现微信小程序自动回复
2018/09/10 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
python中Mako库实例用法
2020/12/31 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
委托协议书范本
2014/04/22 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书