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