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

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

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>

jquery.screwdefaultbuttonsV2.jsを使ってカスタムされたラジオボタンやチェックボックスを表示する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>

jquery.screwdefaultbuttonsV2.jsを使ってカスタムされたラジオボタンやチェックボックスを表示する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>

jquery.screwdefaultbuttons：ラジオボタンやチェックボックスをカスタムされた画像として表示するデモページ

jquery.screwdefaultbuttons：ラジオボタンやチェックボックスをカスタムされた画像として表示するデモページ

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告