HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明
1. ラジオのグループ化

名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選択できるのは 1 つだけです。

コードをコピー
コードは次のとおりです。

<span>グループ1:</span>
<input type="radio" id="radio1" check="checked" name="group1" />ラジオ1
<input type="radio" id="radio2" name="group1" />ラジオ2
<input type="radio" id="radio3" name="group1" />ラジオ3

<span>グループ2:</span>
<input type="radio" id="radio4" check="checked" name="group2" />radio4
<input type="radio" id="radio5" name="group2" />ラジオ5
<input type="radio" id="radio6" name="group2" />ラジオ6

効果は以下のとおりです。


2. 選択したラジオノードを取得する

これは jQuery を使用すると簡単に実行できます。まずグループを選択し、次にチェックされているものを次のようにフィルタリングします。


コードをコピー
コードは次のとおりです。

var group1 = $("[name='group1']").filter(":checked");
console.log(group1.attr("id"));

3. ラジオノードを選択する

jQuery を使用して、checked 属性を設定します。

コードをコピー
コードは次のとおりです。

$("#radio2").attr("チェック済み", "チェック済み");

4. ラジオノードを選択する

チェックされた属性を削除します。

コードをコピー
コードは次のとおりです。

$("#radio1").removeAttr("チェック済み");

これにより、グループ内の無線がいずれも選択されない状況が発生する可能性があります。

5. 選択したイベントと選択していないイベントを登録する

または、次のように jQuery の on 関数を使用して変更イベントを登録します。

コードをコピー
コードは次のとおりです。

$("[name='group1']").on("変更",
関数 (e) {
console.log($(e.target).val());
}
);

このように、group1 のいずれかが選択されている限り、関数がトリガーされます。

<<:  CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

>>:  Vue で $attrs と $listeners を使用するチュートリアル

推薦する

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

Dockerコンテナが外部ネットワークにpingできない問題を解決する

今日、docker で redis 環境を構築していたところ、yum がリソースを取得できず、インタ...

CentOS 8.4 に Docker をインストールする詳細なチュートリアル

目次序文:システム要件:インストール環境:古いバージョンをアンインストールします: yum は具体的...

Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

CSS によるテキストの切り捨てテキストを自動的に切り捨てるスタイル コードを実装するには、次のコー...

HTMLのフォントがline-heightを指定しても垂直方向に中央揃えできない問題の解決方法を詳しく説明します

による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...

TLS暗号化通信を使用してDockerにリモート接続する詳細な例

デフォルトでは、Docker はネットワーク化されていない UNIX ソケット上で実行されます。オプ...

Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要

crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

Windows 10 での MySQL 8.0.16 のインストールと設定のチュートリアル

この記事では、参考までにMySQL 8.0.16のインストールと設定方法のグラフィックチュートリアル...

MySQLの行ロックとテーブルロックの意味と違いの詳細な説明

1. はじめに行ロックとテーブルロックの違いは面接で頻繁に出てくるはずです。MySQL のロックにつ...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

理論の普及——ユーザーエクスペリエンス

1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...