映像素材：
最終レンダリング：
<HTML>
<タイトル> JSラジオラジオの効果を美化純粋なチェックボックスが選択されているマルチページ、およびチェックボックスを実現</ TITLE>
<HEAD>
<スタイル>
BODY {
フォントファミリ：「のSegoe UI」、フルティガー、のTahoma、ヘルベチカ、「ヘルベチカノイエ」、ゴシック、サンセリフ。FONT-SIZE：62.5％
}
LABEL {
MARGIN-RIGHT：1.2em
}
.custom-チェックボックス{
POSITION：相対
}
.customラジオ{
POSITION：相対
}
.custom-チェックボックスINPUT {
POSITION：絶対。MARGIN：0PX。TOP：2ピクセル。LEFT：2ピクセル
}
.custom-チェックボックスLABEL {
POSITION：相対。PADDING-BOTTOM：0.5em; LINE-HEIGHT：1; MARGIN：0PXの0PXの0.3em; PADDING-LEFT：30px; PADDING-RIGHT：0PX。表示ブロック; FONT-SIZE：1.3em; CURSOR：ポインタ; PADDING-TOP：0.5em
}
.custom-チェックボックスLABEL {
背景：URL（./ checkbox.gif）無反復
}
.customラジオLABEL {
背景：URL（./ radiobutton.gif）無反復
}
.custom-チェックボックスLABEL {
BACKGROUND-POSITION：-10px -14px
}
.customラジオLABEL {
BACKGROUND-POSITION：-10px -14px
}
.custom-チェックボックスLABEL.hover {
BACKGROUND-POSITION：-10px -114px
}
.custom-チェックボックスLABEL.focus {
BACKGROUND-POSITION：-10px -114px
}
。カスタム無線LABEL.hover {
BACKGROUND-POSITION：-10px -114px
}
.customラジオLABEL.focus {
BACKGROUND-POSITION：-10px -114px
}
.custom-チェックボックスLABEL.checked {
BACKGROUND-POSITION：-10px -214px
}
.customラジオLABEL.checked {
BACKGROUND-POSITION：-10px -214px
}
.custom-チェックボックスLABEL.checkedHover {
BACKGROUND-POSITION：-10px -314px
}
.custom-チェックボックスLABEL.checkedFocus {
BACKGROUND-POSITION：-10px -314px
}
.custom-チェックボックスLABEL.focus {
アウトラインスタイル：点在。OUTLINE-COLOR：#CCC; アウトラインの幅：1ピクセル
}
.customラジオLABEL.focus {
アウトラインスタイル：点在。OUTLINE-COLOR：#CCC; アウトラインの幅：1ピクセル
}
.customラジオINPUT {
POSITION：絶対。MARGIN：0PX。TOP：2ピクセル。LEFT：2ピクセル
}
.customラジオLABEL {
POSITION：相対。PADDING-BOTTOM：0.5em; LINE-HEIGHT：1; MARGIN：0PXの0PXの0.3em; PADDING-LEFT：30px; PADDING-RIGHT：0PX。表示ブロック; FONT-SIZE：1.3em; CURSOR：ポインタ; PADDING-TOP：0.5em
}
</スタイル>
</ HEAD>
<BODY>
<FORM ACTION = "＃" METHOD = "POST">
<INPUT TYPE = "チェックボックス" NAME = "ジャンル" ID = "アクション"値= "アクション" />
<=用ラベル"アクション">答案一</ラベル>
の<input type = "チェックボックス"名前= "ジャンル" ID = "コメディ"値= "喜劇" />
"喜劇" =用の<label>答案二</ label>は
<input type = "チェックボックス" NAME = "ジャンル" ID = "チェック-3"値= "大作" />
答案三</ label>は<= "チェック-3"のラベル>
<伝説> Caddyshackは右、最大の映画ですか？</レジェンド>
<BR>
<上記のid =「完全」値=「完全」/言及したタイプ=「ラジオ」名前=「意見新規」のINPUT>
まさに</ label>は<=「完全」のラベルを>
<種類のINPUT =「ラジオ"名前="意見新規NO-ウェイ"/> NO-ウェイ"=値" "上記のid =を述べ、"
NO-ウェイ=のための<label"「>あなたは冗談する必要があります。</ label>は
<input type = "ラジオ"名前= "意見" ID = "いただきました！-caddyshack"値= "いただきました！-caddyshack" />
小小球童是什么？</ label>は<= "いただきました！-caddyshack"のラベル>
< /フォーム>
<スクリプト>
/ *
関数hasClass（OBJ、CLS）
{
obj.className.match戻る（新しい正規表現（ '（\\よ| ^）' + CLS +を'（\\ | S）$'））;
}
関数addClass（OBJ、CLS）
{
もしobj.className + = "" + CLS（this.hasClass（OBJ、CLS）！）。
}
removeClass機能（OBJ、CLS）
{
IF（hasClass（OBJ、CLS））{
VAR新しい新しいREG = RegExpオブジェクト（ '（S \\ | ^）' + + CLS '（S \\ | $）'）;
obj.className obj.className.replace =（REG、 ''）;
}
}
関数toggleClass（OBJ、CLS）
{
IF（hasClass（OBJ、CLS））{
removeClass（OBJ、CLS）;
} {他
addClass（OBJ、CLS）。
}
}
関数CSS（OBJ、ATTR、値）
{
//スタイルのHTML属性セットに設定または各要素のプロパティ値を取得
スイッチ（arguments.lengthを）{
ケース2：
[1] IF（typeof演算の引数==「オブジェクト「）{//バルク特性設定
（ATTRでVAR I）obj.style [I] =のATTR [I]を
}
他{//読み取るプロパティ値を
obj.currentStyleを返しますか？obj.currentStyle [ATTR]：getComputedStyle（OBJ、NULL）ATTR]
}
ブレーク。
ケース3：
//属性设置
obj.style [ATTR] =値。
ブレーク;
デフォルト：
リターン「」;
}
}
* /
機能addClass（B、A）{正規表現（ "（\\よ| ^）" + A + "（\\ | S $）"）。テスト（b.className）||（b.className + =」「+ A） }
関数removeClass（B、A）{b.className = b.className.replace（正規表現（ "（\\ | S ^）" + A + "（\\です| $）"）、」「）}
VAR HtmlWrapper =関数（ターゲット、TARGET2、HTML）{
VARラップ= HTML
IF（Object.prototype.toString.call（HTML）=== "[対象文字列]"）
{
IF（document.createRange）
{
VARのFRAG =文書.createDocumentFragment（）。
VaRのDIV =のdocument.createElement（ "DIV"）;
frag.appendChild（DIV）。
div.innerHTML = htmlの。
= frag.firstChild.firstChildを包みます。
}他{// IE8
=のdocument.createElement（HTML）を包みます。
}
}
target.parentNode.replaceChild（ラップ、ターゲット）
wrap.appendChild（ターゲット）
wrap.appendChild（TARGET2）。
}
VAR lblArray = [];
VAR inputArray = [];
VAR checkBoxs = document.getElementsByTagName（ "入力"）;
（; iはcheckBoxs.lengthを<I ++がVAR I = 0）のための
{
IF（ "INPUT" == checkBoxs [I] .tagName）
{
両親= checkBoxs [I] .parentNode; //フォーム
（親）であれば
{
（用VaRのJ = 0; J <parents.children.length; J ++）
{
IF（parents.children [J] == checkBoxs [I]）
{
IF（parents.children [J + 1]）
{
VAR olabel = parents.children [J + 1]。
VaRのoinput =の両親[i]は、
lblArray.push（olabel）。
inputArray.push（oinput）。
//在olabel和oinput外面包一层の<div ...>
HtmlWrapper（oinput、olabel、 '<DIV CLASS = "カスタム- '+ oinput.getAttribute（'タイプ'）+'"> </ div>'） ;
//绑定事件
olabel.onmouseover =関数（）{
addClass（この"ホバー"）。
}
olabel.onmouseout =関数（）{
removeClass（この"ホバー"）。
}
oinput.onmouseover =関数（）{
用（VAR i = 0; I <inputArray.length; iは++）
{
（これは== inputArray [I]）場合
、{
addClass（lblArray [i]は、 "ホバー"）。
}
}
}
oinput.onmouseout =関数（）{
用（VAR i = 0; I <inputArray.length; iは++）
{
（これは== inputArray [I]）場合
、{
removeClass（lblArray [i]は、 "ホバー"）。
}
}
}
oinput.onclick =関数（）{
用（VAR i = 0; iはinputArray.lengthを<; iは++）
{
（これは== inputArrayは、[I]）があれば
{
IF（this.checked == TRUE）
{
addClassは（lblArray [i]は、 "チェック"）。
（inputArray [I] .TYPE == "ラジオ"）であれば
{
（VARのK = 0; <inputArray.length k個あり、k ++）のための
{
（！I = K）{場合
inputArray [k]は=偽.checkedを。
removeClass（lblArray [k]は、 'チェック'）。
}
}
}
}
他
{
removeClass（lblArray [i]は、 '確認しました'）。
}
}
}
}
olabel.onclick =関数（）{
用（VAR i = 0; I <lblArray.length; iは++）
{
（これは== lblArray [I]）場合
、{
（！inputArray [I] .checkedを）場合//找到与当前ラベル对应且紧前的<入力>元素
{
inputArray [I] .checkedを= FALSE;
（これは、 "チェックする"）addClass。
（inputArray [I] .TYPE == "ラジオ"）であれば
{
（VARのK = 0; <inputArray.length k個あり、k ++）のための
{
（！I = K）{場合
inputArray [k]は=偽.checkedを。
removeClass（lblArray [k]は、 'チェック'）。
}
}
}
}
そうでなければ
{
（inputArray [I] .TYPE == "チェックボックス"）であれば
{
removeClass（これは、 'チェック'）。
inputArray [I] = TRUE .checkedを。
ブレーク;
}
} //私は最後のために
}
}
破ります。
}
}
}
}
}
</スクリプト>
</ BODY>
</ HTML>
ます。https：//www.cnblogs.com/yzryc/p/article_001.htmlで再現