コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

イオンラジオボタン

黄舟
リリース： 2017-02-16 14:00:09
オリジナル
973 人が閲覧しました

1. 背景の例

イオンラジオボタンは、スタイル item-radio を使用します


2. ソースコードの例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<title>ionic之单选框</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/angular/angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.js"></script>
		<script type="text/javascript" src="../js/ionic-angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
	</head>
	<body>
		<p class="content has-header">
	      	<p class="list">
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	一月
		          	</p>
		          	<i class="radio-icon ion-checkmark "></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	二月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	三月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	四月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	五月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	六月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	七月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	八月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	九月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	十月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	十一月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	十二月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		        <label class="item item-radio">
		          	<input type="radio" name="group" value="go" checked="checked">
		          	<p class="item-content">
		            	十二月
		          	</p>
		          	<i class="radio-icon ion-checkmark"></i>
		        </label>
		    </p>
		</p>

	</body>
</html>
ログイン後にコピー


3. 結果の例

イオンラジオボタン

上記は ionic のラジオボタンの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。


関連ラベル：
ionic，单选框，JavaScript
ソース：php.cn
前の記事：イオンスイッチ 次の記事：イオンスタイルチェックボックス
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Symfony 5 のカスタムデフォルト利用規約チェックボックス 私は symfony を初めて使用するので、登録ページを構築しようとしています。フォームとフィールドは FormType を通じて生成されますが、利用規約チェックボックスの外観を変...
から 2024-04-04 22:42:19
0
1
1365
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
改訂されたタイトル: チェックボックスの選択に基づいて合計を計算する 私は単純な財務追跡アプリケーションを開発しています。アプリケーションには、すべての経費請求書が記載された表があり、合計金額は表の外側にあります。 JS または AJAX を使用して...
から 2024-04-04 13:45:50
0
1
3465
不明なセレクターと子を持つ Javascript イベント デリゲート 要素のクリックをキャプチャすることになっている動的セレクター（linkTrigger）があります。 linkTrigger が何であるか、また子が存在するかどうかはわかりません。 ...
から 2024-04-03 23:39:19
0
1
420
Select2 ドロップダウンの外観をカスタマイズする 私の場合、ドロップダウンに select2Combobox を使用しています。ここでは、国の選択が変更されると、その選択された ID を JSON 結果に渡し、その結果を州コンボ ...
から 2024-04-03 11:27:22
0
1
338
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート