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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
一个网马的tips实现分析
Nov 28 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
js中this用法实例详解
May 05 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
Vue实现附件上传功能
May 28 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
angularjs 缓存的使用详解
2018/03/19 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
口头翻译求职人自荐信
2013/12/07 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
捐助倡议书
2015/01/19 职场文书
签证工作证明模板
2015/06/15 职场文书
公司规章制度范本
2015/08/03 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
golang中的空接口使用详解
2021/03/30 Python
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS