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

推薦する

Tomcat の文字化けしたコードとポート占有の解決方法について簡単に説明します

Tomcat サーバーは、無料でオープン ソースの Web アプリケーション サーバーです。軽量のア...

HTMLフォームタグチュートリアル(1):

フォームは、動的な Web ページを実装するための主要な外部フォームです。フォームとフォーム フィー...

portainer を使用してリモート docker に接続するチュートリアル

Portainer は、Docker ホストと Docker Swarm クラスターの管理に使用でき...

CSSはインラインブロックのずれの問題を解決します

もうナンセンスじゃない、郵便番号HTML部分 <div class="positio...

MySQL データベース テーブルとデータベース パーティショニング戦略

まず、テーブルを分割する必要がある理由について説明します。データシートが数百万に達すると、1 回のク...

複数の例で HTML フォームを使用する方法

参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。 1...

背景画像のみを180度回転させるCSS3実装例

1. 心の旅最近コックピットを書いていたときに、背景画像を単純に特定の角度に回転させるという問題につ...

シリアルポート使用時のvue-electronの問題解決

エラーは次のとおりです:キャッチされない TypeError: 未定義のプロパティ 'mod...

スライダー間隔コンポーネントのネイティブ js 実装

この記事の例では、スライダー間隔コンポーネントを実装するためのjsの具体的なコードを参考までに共有し...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

MacでMysqlのルートパスワードを忘れた場合の解決方法

長い間コンピューターで mysql を使用していなかったので、パスワードを忘れてしまいました。でも、...

Linux で crontab を使用してスケジュールされたタスクを追加する方法

序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

MySQLとSpringの自動コミットの詳細な説明

1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...