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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
Vue父子组件传值的一些坑
Sep 16 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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
joomla组件开发入门教程
2016/05/04 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JS常用字符串处理方法应用总结
2014/05/22 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
深入理解React高阶组件
2017/09/28 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Django 解决由save方法引发的错误
2020/05/21 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
如何将json数据转换为python数据
2020/09/04 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
软件测试笔试题
2012/10/25 面试题
竞争与合作演讲稿
2014/05/12 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书