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 null undefined 空区别说明
Jun 13 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
React-router4路由监听的实现
Aug 07 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
js实现随机8位验证码
2020/07/24 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python 学习教程之networkx
2019/04/15 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
护理专业自荐信
2013/12/03 职场文书
学生安全责任书范本
2014/07/24 职场文书
调研汇报材料范文
2014/08/17 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
购房委托书
2014/10/15 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
债务纠纷代理词
2015/05/25 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android