ホームページ > 記事 > ウェブフロントエンド > 選択したチェックボックスの色の変更を実現するjsメソッド text_javascriptスキル
選択したチェックボックスの色の変更を実現するjsメソッド text_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:45:091521ブラウズ
この記事の例では、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 プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。