jQuery

jQuery UIでアイコンなしのラジオボタンとチェックボックスを設定する方法

2021年10月14日 by single コメントはまだありません

jQuery UIでアイコンなしのラジオボタンとチェックボックスを設定する方法

サンプル

ラジオボタン

お住まいの地域を選択してください

チェックボックス

交通手段:

ラジオボタン

お住まいの地域を選択してください

チェックボックス

交通手段:

HTMLコード

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>jQuery UI Checkboxradio demo</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
   <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
   <script>
   $( function() {
     $( "input[rel='noicon']" ).checkboxradio();
     $( "input[rel='icon']" ).checkboxradio({icon:false});
   } );
   </script>
 </head>
<body>
<div class="widget">
   <h1>チェックボックス ラジオボタン ウィジェット</h1>
   <h2>ラジオボタン</h2>
   <fieldset>
     <legend>お住まいの地域を選択してください </legend>
     <label for="radio-1">東京</label>
     <input type="radio" name="radio-1" id="radio-1" rel='icon'>
     <label for="radio-2">大阪</label>
     <input type="radio" name="radio-1" id="radio-2" rel='icon'>
     <label for="radio-3">名古屋</label>
     <input type="radio" name="radio-1" id="radio-3" rel='icon'>
   </fieldset> 
   <h2>チェックボックス</h2>
   <fieldset>
     <legend>交通手段: </legend>
     <label for="checkbox-1">鉄道</label>
     <input type="checkbox" name="checkbox-1" id="checkbox-1" rel='icon'>
     <label for="checkbox-2">航空機</label>
     <input type="checkbox" name="checkbox-2" id="checkbox-2" rel='icon'>
     <label for="checkbox-3">自家用車</label>
     <input type="checkbox" name="checkbox-3" id="checkbox-3" rel='icon'>
     <label for="checkbox-4">船舶</label>
     <input type="checkbox" name="checkbox-4" id="checkbox-4" rel='icon'>
   </fieldset>
   <br/> <hr>
   <h2>ラジオボタン</h2>
   <fieldset>
     <legend>お住まいの地域を選択してください </legend>
     <label for="radio-11">東京</label>
     <input type="radio" name="radio-11" id="radio-11" rel='noicon'>
     <label for="radio-12">大阪</label>
     <input type="radio" name="radio-11" id="radio-12" rel='noicon'>
     <label for="radio-13">名古屋</label> 
     <input type="radio" name="radio-11" id="radio-13" rel='noicon'>
   </fieldset> 
   <h2>チェックボックス</h2>
   <fieldset>
     <legend>交通手段: </legend>
     <label for="checkbox-11">鉄道</label>
     <input type="checkbox" name="checkbox-1" id="checkbox-11" rel='noicon'>
     <label for="checkbox-12">航空機</label>
     <input type="checkbox" name="checkbox-2" id="checkbox-12" rel='noicon'>
     <label for="checkbox-13">自家用車</label>
     <input type="checkbox" name="checkbox-3" id="checkbox-13" rel='noicon'>
     <label for="checkbox-14">船舶</label>
     <input type="checkbox" name="checkbox-4" id="checkbox-14" rel='noicon'>
   </fieldset>
</div>
</body>
</html>

デモ

Checkboxradio Widget

オプション

classes

チェックボックス／ラジオボタンに設定できるCSSクラスを定義するオプションです。

デフォルトは、

{
  "ui-checkboxradio-label": "ui-corner-all",
  "ui-checkboxradio-icon": "ui-corner-all"
}

ラベルのCSSクラスとオブジェクトのCSSクラスを定義を指定できます。

disabled

「true」にすると、無効化することのできるオプションです。

デフォルトは「false」です。

icon

「false」にすると、チェックボックスの場合は、チェックボックスオブジェクトが、ラジオボタンの場合は、ラジオボタンオブジェクトが非表示になり、ボタンやラベルがチェックボックス、または、ラジオボタンとして機能することになります。

デフォルトは「true」です。

サンプルでは、画面上部にラジオボタン／チェックボックスが「icon:false」と指定してあり、サンプルのようにオブジェクトが非表示になります。

ブラウザで実装されているチェックボックスとかラジオボタンってデザイン的にあまり格好良くなく、「icon:false」とすることで、オブジェクトを消せ、好き内容にデザインでき、デザイン的には汎用的になるのではないでしょうか。

label

チェックボックス、または、ラジオボタンに設定できるラベルを定義できるオプションになります。

デフォルトは「null」です。