js實現(xiàn)選中復選框文字變色的方法

更新時間：2015年08月14日 09:33:44 作者：企鵝

這篇文章主要介紹了js實現(xiàn)選中復選框文字變色的方法,涉及javascript鼠標事件及頁面元素的相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)選中復選框文字變色的方法。分享給大家供大家參考。具體如下：

這里實現(xiàn)選中復選框時，文字加上一個背景色，變通一下，還是很有用的。

運行效果如下圖所示：

在線演示地址如下：

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>網(wǎng)頁特效</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 類...
2007-05-05
JSONP 的原理、理解與實例分析
這篇文章主要介紹了JSONP 的原理、理解與實例,結合實例形式分析了JSONP 的基本概念、原理、理解與使用技巧,需要的朋友可以參考下
2020-05-05
JavaScript可迭代對象詳細介紹
ES6中引入了迭代器與可迭代對象的概念，并且提供了對可迭代對象的相關支持，如for...of循環(huán)，Map(iterable)構造器，展開語法...等。讓我們對數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化
2022-06-06
gulp構建小程序的方法步驟
這篇文章主要介紹了gulp構建小程序的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
js 右下角彈窗效果代碼(IE only)
js 右下角彈窗效果代碼,雖然IE only，但這個代碼的邏輯可以參考下。了解下IE與firefox的區(qū)別，自己寫個兼容的版本吧。
2010-06-06
js實現(xiàn)div色塊拖動錄制
這篇文章主要為大家詳細介紹了js實現(xiàn)div色塊拖動錄制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01
微信小程序自定義yPicker組件實現(xiàn)省市區(qū)三級聯(lián)動功能
這篇文章主要介紹了微信小程序自定義yPicker組件分析及省市區(qū)三級聯(lián)動實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
JavaScript復制內(nèi)容到剪貼板的兩種常用方法
最近一個活動頁面中有一個小需求，用戶點擊或者長按就可以復制內(nèi)容到剪貼板，記錄一下實現(xiàn)過程和遇到的坑,需要的朋友可以參考下
2018-02-02
JavaScript this的原理以及指向詳解
面向?qū)ο笳Z言中 this 表示當前對象的一個引用。但在 JavaScript 中 this 不是固定不變的，它會隨著執(zhí)行環(huán)境的改變而改變，在方法中，this 表示該方法所屬的對象，如果單獨使用，this 表示全局對象
2021-10-10
js判斷一個字符串是否包含一個子串的方法
這篇文章主要介紹了js判斷一個字符串是否包含一個子串的方法,實例分析了判斷的技巧與第三方腳本的使用方法,需要的朋友可以參考下
2015-01-01