js实现选中复选框文字变色的方法
更新时间：2015年08月14日 09:33:44 作者：企鹅
这篇文章主要介绍了js实现选中复选框文字变色的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现选中复选框文字变色的方法。分享给大家供大家参考。具体如下：
这里实现选中复选框时，文字加上一个背景色，变通一下，还是很有用的。
运行效果如下图所示：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-checkbox-cha-font-color-codes/
具体代码如下：
<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 中的 `==` 和 `===` 操作符详解
在 JavaScript 中,== 和 === 是两个常用的比较操作符,分别用于 宽松相等（类型转换相等） 和 严格相等（类型和值必须相等） 的比较,理解它们的区别以及具体的比较规则对于编写准确和高效的代码至关重要,需要的朋友可以参考下2024-09-09
本文通过实例代码给大家介绍了JavaScript 用fetch 实现异步下载文件功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了JS实现可自定义大小，可双击关闭的弹出层效果,涉及JavaScript定时函数及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
微信小程序 组件的外部样式externalClasses使用详解
这篇文章主要介绍了微信小程序里 组件的外部样式externalClasses使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了js实现有时间限制消失的图片方法,实例分析了javascript操作setTimeout及图片特效操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
今天小编就为大家分享一篇layui框架与SSM前后台交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了JavaScript获取图片真实大小代码实例,本文使用onload事件来获取图片的真实大小,需要的朋友可以参考下2014-09-09
JavaScript ServiceWorker API的好处就是让WEB开发人员轻松的控制缓存。这篇文章主要为大家详细介绍了Javascript缓存API，感兴趣的小伙伴们可以参考一下2016-06-06
JS是一门计算机编程语言，是一门动态语言也称为脚本语言，是解析型编程语言。需要了解跟多2012-11-11
最新评论