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 一次处理多个ajax请求的代码
Sep 02 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
Bootstrap布局方式详解
May 27 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
微信小程序实现倒计时功能
Nov 19 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python编程之多态用法实例详解
2015/05/19 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
如何基于python实现不邻接植花
2020/05/01 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
python 批量将中文名转换为拼音
2021/02/07 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
中考标语大全
2014/06/05 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
先进工作者事迹材料
2014/12/23 职场文书