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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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 不使用js实现页面跳转
2014/02/11 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 写类方式之十
2009/07/05 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
javascript实现数独解法
2015/03/14 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
python多进程实现进程间通信实例
2017/11/24 Python
python多线程http压力测试脚本
2019/06/25 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
如何在python中实现随机选择
2019/11/02 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
外包公司软件测试工程师
2014/11/01 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
承诺书范文
2014/06/03 职场文书
医德医魂心得体会
2014/09/11 职场文书
任命书标准格式
2015/03/02 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
结婚幸福感言
2015/08/01 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python