JavaScript を使用して、input_form 特殊効果のラジオとチェックボックスのスタイルを変更します。-jsチュートリアル-php.cn

JavaScript を使用して、input_form 特殊効果のラジオとチェックボックスのスタイルを変更します。

WBOY

リリース： 2016-05-16 18:41:24

オリジナル

844 人が閲覧しました

この記事に関連する写真

<title>

</title>JavaScript を使用してラジオとチェックボックスのスタイルをカスタマイズします

<h4>
</h4>
ラジオボタンのスタイル: <div class="input_style">
<span>
<input type="radio" name="sex" value="boy" checked id="sex_boy">
</span><label for="sex_boy"></label>男性<span>
<input type="radio" name="sex" value="girl" id="sex_girl">
</span><label for="sex_girl"></label>女性</div>
<div class="input_style">
<span>
<input type="radio" name="marry" value="yes" id="marry_yes">
</span><label for="marry_yes"></label>男の子<span>
<input type="radio" name="marry" value="not" checked id="marry_not">
</span><label for="marry_not"></label>女の子</div>
<h4>
</h4>
チェックボックスのスタイル: <ul class="checkbox input_style">
<li>
<span><input type="checkbox" name="hobby" checked id="hobby1">
</span><label for="hobby1"></label>xhtml</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby2">
</span><label for="hobby2"></label>CSS</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby3">
</span><label for="hobby3"></label>JavaScript</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby4">
</span><label for="hobby4"></label>フラッシュ</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby5">
</span><label for="hobby5"></label>Ajax</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby6">
</span><label for="hobby6"></label>AS</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby7">
</span><label for="hobby7"></label>フレックス</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby8">
</span><label for="hobby8"></label>PHP/.NET/JSP</li>
</ul>
<ul class="checkbox input_style">
<li>
<span><input type="checkbox" name="hobby" checked id="hobby9">
</span><label for="hobby9"></label>理解しました</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby10">
</span><label for="hobby10"></label>全般</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby11">
</span><label for="hobby11"></label>熟練</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby12">
</span><label for="hobby12"></label>マスタリー</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby13">
</span><label for="hobby13"></label>上級専門家</li>
</ul>
<div class="button" id="button">
<input type="button" value="加载样式">
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]