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 を使用するチュートリアル

推薦する

Hadoop 2.Xの新機能、ごみ箱機能の説明

ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...

MySQLデータベースの操作とメンテナンスのデータ復旧方法

これまでの 3 つの記事では、論理バックアップと物理バックアップを含む、MySQL データベースの一...

CentOS 環境で NFS リモート ディレクトリ マウントを使用する手順の紹介

目次1. NFS の概要2. NFS構築1. NFSサーバーの構築2. NFSクライアントの構築3....

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

Vueプラグインの書き方を説明する記事

目次プラグインとはプラグインの作成プラグインの使用要約するプラグインとはVue フレームワークでは、...

HTML テーブルインライン形式の詳細な説明

インライン形式<colgroup>...</colgroup>属性名 属性値...

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

角度でechartsマップを使用する詳細な説明

目次echartの初期化アプリベースチャートコンポーネントhtml CS app-base-char...

シンプルなウェブデザインコンセプトのカラーマッチング

(I)ウェブページのカラーマッチングの基本概念(1)白黒の言葉は永遠のテーマです。誰もそれを悪く言う...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

GET POSTの違い

1. Get はサーバーからデータを取得するために使用され、Post はサーバーにデータを渡すために...

Ubuntuのバックアップ方法(4種類)のまとめ

方法1:リスピンを使用するには、次の手順に従ってください。 sudo add-apt-reposit...

Windows 上で Zookeeper サーバーを構築するチュートリアル

インストールと設定Apacheの公式ウェブサイトには多くのミラーダウンロードアドレスが用意されており...

ウェブページでmp3またはフラッシュプレーヤーコードを再生する

コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...