jQuery Checkboxradioのサンプル(外観を変える)

nas2020/04/03

jQueryのCheckboxradioでCheckboxとradioボタンの外観を変えるサンプルです。

目次

説明 Checkboxradio
サンプル チェックボックスの外観を変える
  ラジオボタンの外観を変える

Checkboxradio

  • Checkbox + radioでチェックボックスとラジオボタンの外観を変更します。
  • jQuery UIのライブラリです。使用時は以下を追加します。
    ・jquery.min.js
    ・jquery-ui.min.js
    ・jquery-ui.css
  • 以下はjQuery UIのCheckboxradioのリンクです。
    https://jqueryui.com/checkboxradio/

チェックボックスの外観を変える

チェックボックスの外観を変えるサンプルです。チェックがありません。
チェックボックスは複数選択できます。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
/*クリックしたあとの色 */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #aaaaaa;
	background: DodgerBlue;
	font-weight: normal;
	color: #212121;
}
</style>

<input type="checkbox" id="chk1" value="1" >
<label for="chk1">1</label>
<input type="checkbox" id="chk2" value="2" >
<label for="chk2">2</label>
<input type="checkbox" id="chk3" value="3" >
<label for="chk3">3</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
  $( function() {
    $("input[type='checkbox']").checkboxradio({icon:false});
  } );
</script>

4～13行目は、jquery-uiのCSSに対する色の指定で、クリックしたあとの色を変更しています。直接指定すれば色のカスタマイズができます。
17～22行目は、チェックボックスです。ラベルのforの値とチェックボックスのidの値を一致させます。
28行目は、セレクタで17,19,21行目のチェックボックスを指し、checkboxradioで外観を変更しています。
iconにfalseを指定するとチェックが消え、trueにすると表示されます。

以下のようにiconにtrueを設定した場合です。

ラジオボタンの外観を変える

ラジオボタンの外観を変えるサンプルです。丸いボタンがありません。
ラジオボタンは1つのみ選択できます。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
/*クリックしたあとの色 */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #aaaaaa;
	background: DodgerBlue;
	font-weight: normal;
	color: #212121;
}
</style>

<input type="radio" name="num1" id="a1" value="1" >
<label for="a1">1</label>
<input type="radio" name="num1" id="a2" value="2" >
<label for="a2">2</label>
<input type="radio" name="num1" id="a3" value="3" >
<label for="a3">3</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
  $( function() {
    $("input[type='radio']").checkboxradio({icon:false});
  } );
</script>

4～13行目は、jquery-uiのCSSに対する色の指定で、クリックしたあとの色を変更しています。直接指定すれば色のカスタマイズができます。
17～22行目は、ラジオボタンです。nameの値を同じにします。ラベルのforの値とチェックボックスのidの値を一致させます。
28行目は、セレクタで17,19,21行目のチェックボックスを指し、checkboxradioで外観を変更しています。
iconにfalseを指定すると丸いボタンが消え、trueにすると表示されます。

関連の記事

jQuery 書き方・セレクタのサンプル(変数/AND/OR)
jQuery チェックボックスの値を取得/設定する

△上に戻る