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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
jQuery设计思想
Mar 07 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
js回调函数原理与用法案例分析
Mar 04 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
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php查询及多条件查询
2017/02/26 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
基于angular实现三级联动的生日插件
2017/05/12 Javascript
微信小程序实现留言板
2018/10/31 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Python之str操作方法(详解)
2017/06/19 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
详解django中Template语言
2020/02/22 Python
用Python 执行cmd命令
2020/12/18 Python
Spy++的使用方法及下载教程
2021/01/29 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
行政工作个人的自我评价
2014/02/13 职场文书
业务员自荐信范文
2014/04/20 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
python处理json数据文件
2022/04/11 Python