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

推薦する

Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...

Node.js ファイルのコピー、フォルダの作成、その他の関連操作

NodeJS は次のファイルをコピーします:通常、小さなファイルのコピー操作では、ストリーム パイプ...

MySQL MHA 操作ステータス監視の概要

目次1. プロジェクトの説明1.1 背景1.2 実装設計1.2.1 従来の方法1.2.2 最適化され...

CSSを使用して炎の効果を作成する方法

本文は以下から始まります。 123WORDPRESS.COM ダウンロード:純粋な CSS3 で超リ...

React でインデックスをキーとして使用することが推奨されないのはなぜですか?

1. 古い仮想DOMと新しい仮想DOMを比較し、まずキーが同じかどうかを確認します。 2. 引き続...

MySQLバックアップとリカバリの実践に関する詳細な説明

1. mysqlbackup の紹介mysqlbackup は、MySQL Enterprise B...

MySQLは重複しないデータ挿入を実装するためにUNIQUEを使用する

SQL UNIQUE制約UNIQUE 制約は、データベース テーブル内の各レコードを一意に識別します...

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

Linux インストール Apache サーバー構成プロセス

袋を用意するインストールApacheがすでにインストールされているかどうかを確認するrpm -qa ...

mysqlはストアドプロシージャを使用してツリーノード取得メソッドを実装します。

図に示すように: テーブルデータこのようなツリーの場合、「Gao Yinrui」の下のすべてのノード...

ネイティブJSでマウススライドによる愛の拡散効果を実現

この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。 ...

Vue3のレスポンシブ原則の詳細な説明

目次Vue2 レスポンシブ原則のレビューVue3 レスポンシブ原則の分析ネストされたオブジェクトの応...

HTMLの基礎知識:ウェブページの基礎知識

HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...

Vue Element UI カスタム説明リストコンポーネント

この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...