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 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
详解小程序循环require之坑
Mar 08 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
深入理解node.js之path模块
2017/05/03 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python占用的内存优化教程
2019/07/28 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
优秀公益广告词大全
2014/03/19 职场文书
毕业生就业协议书
2014/04/11 职场文书
建议书的格式
2014/05/12 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
店面出租协议书范本
2014/11/28 职场文书
图书借阅制度范本
2015/08/06 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android