<img src="http://files.jb51.net/upload/201010/20101020104517944.gif" border="0" alt="jquery と css を使用してパーソナライズされたラジオ ボタンとチェックボックスを作成する_jquery" ><br>上の画像はcssとjqueryで美化した後の効果です。すごいじゃないですか！これは別のスクリプト ライブラリで見たエフェクトで、とても良いと思ったので、jquery を使用して自分で実装しました。みんなに感謝してもらうために！ <br> 早速、コードに進みましょう: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="20411" class="copybut" id="copybut20411" onclick="doCopy('code20411')"><u>コードをコピーします</u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code20411"> <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br>< ;html xmlns="http://www.w3.org/1999/xhtml"> <br><head> パーソナライズされたラジオ ボタンとチェックボックスを作成する</title> ; <br><style type="text/css"> <br>* <br>マージン: 0; <br>フォントサイズ: <br> <br>.formt <br>{ <br>幅: 400px; <br>マージン: 10px 自動; <br>高さ: 200px; 🎜>} <br>.unselected <br>{ <br>背景画像: url(rdo_off.png); <br>} <br>.selected <br>{ <br>背景画像: url(rdo_on. png); <br>} <br>.未チェック <br>{ <br>背景画像: url(chk_off.png); <br>} <br>.チェック済み <br>{ <br>背景画像: url(chk_on.png); <br>} <br>.f_checkbox, .f_radio <br>{ <br>背景位置: 3px 中心; <br>背景繰り返し: 繰り返しなし <br>カーソル: ポインタ; <br>表示: ブロック; <br>行の高さ: 120%; <br>} <br>.formt 入力 <br>左: -9999px; <br>位置: <br>} <br>.addcolor <br>{ <br>} <br></style> type="text/javascript" src="jquery-1.4.2.min.js"> <br><script type="text/javascript"> function () { <br>//ラジオ選択<br>$(".f_radio").click( <br>function () { <br>$(this).addClass("selected").removeClass("unselected ").siblings(".selected").removeClass("selected").addClass("unselected"); <br>} <br>); <br>//Check<br>$(".f_checkbox" ) .toggle( <br>function () { <br>$(this).addClass("checked"); <br>$(this).children("input").attr("checked", "checked" ) ; <br>}, <br>function () { <br>$(this).removeClass("checked"); <br>$(this).children("input").removeAttr("checked") ; <br>} <br>); <br></script> <br><body> formt"> <br><label class="f_radio unselected"> <br><input type='radio' name="height" value="dwarf" /> <br>オンライン納税申告基準 版<br> ;/label> <br><label class="f_radio unselected"> <br><input type="radio" name="height" value="average" /> プロのオンライン税務申告版< ;/label> <br><label class="f_radio unselected"> <br><input type="radio" name="height" value="giant" /> <br><hr /> <br><label class="f_checkbox unchecked"> <br><input type="checkbox" name="newsletter" value="c" id=" c" / > <br>請求書の認証</label> <br><label class="f_checkbox unchecked"> <br><input type="checkbox" name="ニュースレター" value="d" id="d " /> <br>税務関連の証明書</label> <br></div> <br><label for="male"> <br>男性</label> <br><input type="checkbox" name="sex" id="male" /> <br></body> <br><br><br>自分で写真を撮ることができます。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
