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プラグイン

  • CharacterCount

    CharacterCount

    入力フォームに文字数制限を設定し、入力可能文字数をリアルタイムで表示する

  • selectize

    selectize

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

  • pickadate

    pickadate

    入力フォームに日付や時間をピッカーから選択できるUIを簡単に設置できる

  • DropKick

    DropKick

    セレクトボックスの見た目をリッチに

  • iCheck

    iCheck

    チェックボックス、ラジオボタンのなどの見た目をPC,スマホ、クロスブラウザで統一できる