jquery.screwdefaultbuttonsV2.js：カスタムされたラジオボタンやチェックボックスを表示する方法 DAD UNION

jquery.screwdefaultbuttonsV2.jsを使って、カスタムされたラジオボタンやチェックボックスを表示する方法をご紹介します。
ラジオボタンやチェックボックスをカスタムしたデザイン画像で表示してみます。
（まぁ、個人的にはデフォルトのものでイイじゃんって常々思うんですが）

Contents

jquery.screwdefaultbuttonsV2.jsを使ったカスタムされたラジオボタンやチェックボックスを表示するJavaScriptの記述
カスタムされたラジオボタンやチェックボックスを表示するCSSの記述
カスタムされたラジオボタンやチェックボックスを表示するHTMLの記述
jquery.screwdefaultbuttons：ラジオボタンやチェックボックスをカスタムされた画像として表示するデモページ

jquery.screwdefaultbuttonsV2.jsを使ったカスタムされたラジオボタンやチェックボックスを表示するJavaScriptの記述

※jquery.min.js、jquery.screwdefaultbuttonsV2.jsファイルを読み込みます。カスタム対象を$(ラジオボタン).screwDefaultButtons({画像やサイズ})、$(チェックボックス).screwDefaultButtons({画像やサイズ})で設定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.screwdefaultbuttonsV2.js"></script>

<script type="text/javascript">
$(function(){
	$('input:radio').screwDefaultButtons({
		image: 'url("images/radioSmall.jpg")',
		width: 43,
		height: 43
	});
	
	$('input:checkbox').screwDefaultButtons({
		image: 'url("images/checkboxSmall.jpg")',
		width: 43,
		height: 43
	});

});
</script>

カスタムされたラジオボタンやチェックボックスを表示するCSSの記述

※ラジオボタンやチェックボックス、labelのCSSを設定します。必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin: 0;
	min-width: 980px;
	padding: 0;
}
h1{
	text-align:center;
}
.styledRadio, .styledCheckbox {
	display: inline-block;
}
.example {
	padding: 50px 0 0 20px;
}
label {
	line-height: 43px;
	font-size: 20px;
	vertical-align: 14px;
	padding-right: 20px;
}
button{
	display: block;
}
-->
</style>

カスタムされたラジオボタンやチェックボックスを表示するHTMLの記述

※カスタムされたラジオボタンやチェックボックス、各デフォルトチェック済み、各デフォルト無効（Disabled）のパターンを用意しました。

<h1>ラジオボタンやチェックボックスをカスタムされた画像として表示</h1>

	<div class="example">
		<h2>カスタムされたラジオボタン</h2>
		<input type="radio" name="ex1" id="ex1_a">
		<label for="ex1_a">ラジオA</label>
		<input type="radio" name="ex1" id="ex1_b">
		<label for="ex1_b">ラジオB</label>
	</div>
	
	<div class="example">
		<h2>カスタムされたチェックボックス</h2>
		<input type="checkbox" name="ex2_a" id="ex2_a">
		<label for="ex2_a">チェックA</label>
		<input type="checkbox" name="ex2_b" id="ex2_b">
		<label for="ex2_b">チェックB</label>
	</div>
	
	<div class="example">
		<h2>デフォルトチェック済み（Checked）ラジオボタンとチェックボックス</h2>
		<input type="radio" name="ex3_a" checked="checked">
		<input type="checkbox" name="ex3_b" checked="checked">
	</div>
	
	<div class="example">
		<h2>デフォルト無効（Disabled）ラジオボタンとチェックボックス</h2>
		<input type="radio" name="ex4_a" disabled="disabled">
		<input type="checkbox" name="ex4_b" disabled="disabled">
	</div>