フォームで完全な選択または逆選択効果を実現する JavaScript

フォームで完全な選択または逆選択効果を実現する JavaScript

この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

チェックボックスはフォームでよく使用されます。また、ショッピング カートの商品リストなど、チェックボックスによって作成されたリストをすべて選択または選択解除することも非常に一般的です。したがって、この記事では、この一般的な機能の選択効果とその基礎となる実装のアイデアとコードも紹介、デモンストレーション、分析します。以下は JS コードです。

<スクリプト>
        //フォームですべて選択またはすべて選択解除する例: 注: チェックボックスのチェック属性値が true の場合は選択され、false の場合は選択解除されます var j_cbAll = document.getElementById('j_cbAll'); //すべて選択ボタンを取得します var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //すべての入力チェックボックスを取得します //イベントを登録します //1.すべて選択ボタンのイベント j_cbAll.onclick = function () {
            // this.checked は現在のチェックボックスの状態を取得し、true または false の値を返します。
            (var i = 0; i < j_tbs.length; i++) の場合 {
                j_tbs[i].checked = this.checked; // tbody 内の各チェックボックスのチェック値を現在の全選択ボタンのチェック値と同じにして、それらの状態が一致するようにします}
        }
        // 2. tbody 内のチェックボックスのイベント: 下にあるチェックボックスがすべて選択されている場合は、[すべて選択] ボタンも選択されます。少なくとも 1 つが選択されていない場合は、[すべて選択] ボタンも選択解除されます。注: tbody 内のチェックボックスがクリックされるたびに、すべてのチェックボックスが選択されているかどうかを確認する必要があります。for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = 関数(){
                // フラグは、すべて選択ボタンが選択されているかどうかを制御するために使用されます。var flag = true;
                // 下のチェックボックスをクリックするたびに、ループして 4 つのチェックボックスがすべて選択されているかどうかを確認する必要があります for (var i = 0; i < j_tbs.length; i++) {
                    console.log('---'+j_tbs[i].checked);
                    if (j_tbs[i].checked == false) { // ボタンが選択されていない場合は、内部コードを実行してフラグの値をfalseに変更します。
                        フラグ = false;
                        break; // 内部の for ループを終了します。1 つが選択されない限り、残りを判断する必要がないため、実行効率が向上します。}
                }
                j_cbAll.checked = flag; //ループが終了したら、すべて選択ボタンにフラグ値を設定します}
        }
</スクリプト>

実行コードのスクリーンショット:

「すべて選択」をクリックした場合:もう一度クリック:

以下のチェックボックスをオンにすると:

注意:以下の 4 つのチェック ボックスがすべて選択されていない場合は、上の [すべて選択] ボタンは選択されません。

内部JS 実装のアイデアは、主に 2 つの部分に分かれています。最初の部分は、「すべて選択」ボタンの機能です。このボタンが選択されると、その下にあるすべてのチェックボックスがオンになります (true)。注: この値は、この機能の実装の鍵となります。「すべて選択」ボタンのチェックが外れている場合、そのチェック値は false なので、この値を下にあるすべてのサブチェックボックスに割り当てることができます。2 番目の部分は、「すべて選択」ボタンの状態です。これは、下にあるサブチェックボックスのクリック選択機能とその状態によって決まります。以下のすべてが選択されている場合は、「すべて選択」ボタンも選択されている必要があります。少なくとも 1 つがオフになっている場合は、「すべて選択」ボタンもオフになっています。注: サブチェックボックスをクリックするたびに、すべてのチェックボックスが選択されているかどうかの判断が必要です。 (コード分析を組み合わせることをお勧めします。コードには詳細なコメント分析が含まれています)

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js を使用してフォーム項目のすべて選択、選択解除、削除操作を実装する例
  • ReactJSはフォームで単一選択、複数選択、逆選択の例を実装します

<<:  nginx でネストされた if メソッドを実装する方法

>>:  入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する

推薦する

ウェブマスターが注目すべき、ウェブサイトのユーザビリティを向上させる 9 つのコード最適化のヒント

1. ロゴに代替テキストを追加するこれには 2 つの利点があります。スクリーン リーダーがロゴ画像の...

最初のReactページを作成する方法

目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...

Nginx URL 書き換えメカニズムの原理と使用例

URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...

Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス) vuex を使用するだけでなく、vue 内の親子以外のコンポーネ...

vue+el-element でファイル名に応じてダイアログを動的に作成する実践

目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...

vue-video-player を使用してライブ放送を実現する方法

目次1. vue-video-playerをインストールする2. vue-video-playerを...

Apache Tika を使用してファイルが破損しているかどうかを検出する方法

Apache Tika は、さまざまな形式のファイルからファイル タイプを検出し、コンテンツを抽出す...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

uniapp プロジェクトの最適化方法と提案

目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...

Axios はリクエストをキャンセルし、重複リクエストを回避します

目次起源現状リクエストをキャンセル cancelTokenリクエスト方法の変更重複したリクエストを避...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...

Celery と Docker を使用して Django で定期的なタスクを処理する方法

Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します。

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...

vue3でDOMをマウントするためのプラグインを書く際の問題について

vue2と比較して、vue3にはアプリの概念が追加され、vue3プロジェクトの作成も // メイン....