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

推薦する

CSS における @ の使用法の概要 (例と説明付き)

@ ルールは、CSS の実行または動作に関する指示を提供する宣言です。各宣言は @ で始まり、その...

ウェブデザインにおける2種類のタブアプリケーション

現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...

CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル

基本環境パゴダ設置サービスパゴダにインストールされた[Pythonプロジェクトマネージャー]パゴダに...

vue-pdf はオンラインファイルプレビューを実現します

この記事では、参考までに、ファイルのオンラインプレビューを実現するためのvue-pdfの具体的なコー...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

Dockerコンテナはルーティングを介して直接通信し、ネットワーク通信を実現します。

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

MySQL 5.7 データベースのインストール手順の個人的な要約

1.mysql-5.7.19-winx64.zip(これは無料のインストールバージョンで、約318 ...

MySQL における tinyint と int の違いの詳細な説明

質問: int(1) と tinyint(1) の違いは何ですか?このような設計では、いずれにしても...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

Windows および Linux での Redis のインストールとデーモン設定

# Windows および Linux 上の Redis のインストール デーモン構成Redis の...

crontab スケジュールされたタスクが実行されない理由の分析と解決

序文Linux のスケジュールされたタスクを実装する方法としては、cron、anacron、at な...

Node.jsがES6モジュールを処理する方法の詳細な説明

目次1. 2つのモジュールの違い2. Node.jsとの違い3. CommonJSモジュールの読み込...

MySQLデータベースについて学びましょう

目次1. データベースとは何ですか? 2. データベースの分類は? 3. データベースとデータ構造の...

MySQL の分離レベル、ロック、MVCC の紹介

この記事の目的は、これらの概念とその機能の関係を明らかにすることです。 Mysql がトランザクショ...