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實現帶數據驗證和復選框的表單提交功能,需要的朋友可以參考下2017-08-08
javascript 層隱藏和顯示的代碼2009-07-07
這篇文章主要介紹了JS實現微信 "炸屎"大作戰(zhàn),本文通過實例代碼圖文展示給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-07-07
相信很多與頁面打過交道的同學都對 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生2011-10-10
這篇文章主要介紹了原生JavaScript之es6中Class的用法,結合實例形式對比分析了es6與es5相關class定義、區(qū)別及使用技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了微信小程序登錄session的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
所有瀏覽器通用的js添加收藏夾代碼，本文整理了多種方法實現加入收藏夾功能，下面為大家詳細介紹下實現代碼，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要介紹了JS滾動條觸底加載更多,需要的朋友可以參考下2019-09-09
大家好，本篇文章主要講的是JavaScript中深拷貝與淺拷貝詳解，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下2022-02-02
這篇文章主要介紹了display和visibility的區(qū)別,需要的朋友可以參考下2014-02-02