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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
移动端js图片查看器
Nov 17 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue加载完成后的回调函数方法
Sep 07 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
5个javascript的数字格式化函数分享
2011/12/07 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JS继承用法实例分析
2015/02/05 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python字典DICT类型合并详解
2017/08/17 Python
Python实现求数列和的方法示例
2018/01/12 Python
pandas数值计算与排序方法
2018/04/12 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python上下文管理器全实例详解
2019/11/12 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
Unix如何添加新的用户
2014/08/20 面试题
2015迎新晚会开场白
2015/05/29 职场文书
初中团委工作总结
2015/08/13 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python