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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
浅谈javascript的闭包
Jan 23 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
js动态引入的四种方法
May 05 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 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
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
浅谈PHP的反射API
2017/02/26 PHP
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
道德模范先进事迹
2014/02/14 职场文书
文员求职信
2014/07/15 职场文书
岗位说明书怎么写
2014/07/30 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
行政复议答复书
2015/07/01 职场文书