脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js选中复选框文字变色

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之大字符串的连接的StringBuffer 类

    javascript之大字符串的连接的StringBuffer 类

    javascript之大字符串的连接的StringBuffer 类...
    2007-05-05
  • JSONP 的原理、理解 与 实例分析

    JSONP 的原理、理解 与 实例分析

    这篇文章主要介绍了JSONP 的原理、理解与实例,结合实例形式分析了JSONP 的基本概念、原理、理解与使用技巧,需要的朋友可以参考下
    2020-05-05
  • JavaScript可迭代对象详细介绍

    JavaScript可迭代对象详细介绍

    ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for...of循环，Map(iterable)构造器，展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06
  • gulp构建小程序的方法步骤

    gulp构建小程序的方法步骤

    这篇文章主要介绍了gulp构建小程序的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js 右下角弹窗效果代码(IE only)

    js 右下角弹窗效果代码(IE only)

    js 右下角弹窗效果代码,虽然IE only，但这个代码的逻辑可以参考下。了解下IE与firefox的区别，自己写个兼容的版本吧。
    2010-06-06
  • js实现div色块拖动录制

    js实现div色块拖动录制

    这篇文章主要为大家详细介绍了js实现div色块拖动录制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 微信小程序自定义yPicker组件实现省市区三级联动功能

    微信小程序自定义yPicker组件实现省市区三级联动功能

    这篇文章主要介绍了微信小程序自定义yPicker组件分析及省市区三级联动实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • JavaScript复制内容到剪贴板的两种常用方法

    JavaScript复制内容到剪贴板的两种常用方法

    最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑,需要的朋友可以参考下
    2018-02-02
  • JavaScript this的原理以及指向详解

    JavaScript this的原理以及指向详解

    面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变，在方法中，this 表示该方法所属的对象，如果单独使用，this 表示全局对象
    2021-10-10
  • js判断一个字符串是否包含一个子串的方法

    js判断一个字符串是否包含一个子串的方法

    这篇文章主要介绍了js判断一个字符串是否包含一个子串的方法,实例分析了判断的技巧与第三方脚本的使用方法,需要的朋友可以参考下
    2015-01-01

最新评论