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变量以及其作用域详解
Jul 18 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
js实现简单计算器
Nov 22 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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中大括号'{}'用法实例总结
2017/02/08 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
python比较2个xml内容的方法
2015/05/11 Python
Python多线程实现同步的四种方式
2017/05/02 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
创伤外科专业推荐信范文
2013/11/19 职场文书
个人评价范文分享
2014/01/11 职场文书
摄影助理岗位职责
2014/02/07 职场文书
营销学习心得体会
2014/09/12 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
国庆庆典邀请函
2015/02/02 职场文书
保研推荐信格式
2015/03/25 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
提档介绍信范文
2015/10/22 职场文书
安全学习心得体会范文
2016/01/18 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android