Radio One

Checkbox One

Radio

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.fs.picker.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.fs.picker.min.js"></script>
<script>
    $(window).load(function(){
		$('input[type=radio], input[type=checkbox]').picker();
		$('input[type=checkbox]').picker({
			toggle: true
		});
		$('input[name=group_1]').on('change', function(){
			var $this = $(this);
			$this.parent().prev().find('.current-value').text($this.val());
		});
		$('#PickerBox02 input[type=checkbox]').on('change', function(){
			$(this).parent().prev().find('.current-value').empty();
			$('#PickerBox02 input[type=checkbox]').each(function(){
				var $this = $(this);
				if($this.prop('checked')) {
					$this.parent().prev().find('.current-value').append($this.val() + ' ');
				}
			});
		});
    });
</script>
<p class="title">Radio <span class="current-value">One</span></p>
<div class="Picker-box">
	<input checked="checked" class="radio" id="group_1_1" name="group_1" type="radio" value="One" /> <label for="group_1_1">One</label>
	<input class="radio" id="group_1_2" name="group_1" type="radio" value="Two" /> <label for="group_1_2">Two</label>
	<input class="radio" disabled="disabled" id="group_1_3" name="group_1" type="radio" value="Three" /> <label for="group_1_3">Three</label>
</div>

<p class="title">Checkbox <span class="current-value">One</span></p>
<div id="PickerBox02" class="Picker-box">
	<input checked="checked" class="checkbox" id="checkbox_1" name="checkbox_1" type="checkbox" value="One" /> <label for="checkbox_1">One</label>
	<input class="checkbox" id="checkbox_2" name="checkbox_2" type="checkbox" value="Two" /> <label for="checkbox_2">Two</label>
	<input class="checkbox" disabled="disabled" id="checkbox_3" name="checkbox_3" type="checkbox" value="Three" /> <label for="checkbox_3">Three</label>
	<input class="checkbox" id="checkbox_4" name="checkbox_4" type="checkbox" value="Four" /> <label for="checkbox_4">Four</label>
</div>

<p class="title">Radio</p>
<div class="Picker-box">
	<input checked="checked" class="toggle" id="toggle_1" name="toggle_1" type="checkbox" value="One" data-picker-options='{"toggle":true}' /> <label for="toggle_1">One</label>
	<input class="toggle" id="toggle_2" name="toggle_2" type="checkbox" value="Two" data-picker-options='{"toggle":true}' /> <label for="toggle_2">Two</label>
	<input class="toggle" disabled="disabled" id="toggle_3" name="toggle_3" type="checkbox" value="Three" data-picker-options='{"toggle":true}' /> <label for="toggle_3">Three</label>
</div>

Pickerについて

Pickerは、ラジオボタンやチェックボックスのスタイルをクールにしてくれるプラグインです。
見た目は好み次第になりますが、お好みならぜひ
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンス
対応ブラウザ

関連するjQueryプラグイン

  • timepicker

    timepicker

    時間の入力を簡単にしてくれる

  • DependentSelects

    DependentSelects

    セレクトボックスの選択に応じて、次のセレクトボックスの内容を動的に変更

  • selectize

    selectize

    inputボックス、selectボックスなどの入力ボックスの使い勝手を向上してくれる

  • fancyInput

    fancyInput

    入力フォームの文字入力をユニークな見た目、動作に変更

  • Placeholders

    Placeholders

    IE6-9でplaceholderと同じ機能を実現する