この記事では、フォームの完全選択または逆選択を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: nginx でネストされた if メソッドを実装する方法
>>: 入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する
WebRTC は、Web Real-Time Communication の略で、Web リアルタイ...
目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...
関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...
スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...
1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...
今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...
目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...
Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...
序文サーバーを展開した後、私は大きな喜びを感じながら自分の Web サイトにアクセスし、見たものすべ...
目次Oracle 分離レベルMySQL 分離レベル要約する多くの読者は、MySQL のトランザク...
すべてのタグは小文字でなければなりませんXHTML では、すべてのタグは小文字でなければなりません。...
パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...
以下のコードはすべて <head>...</head> の間にあり、具体的な...
1. pipとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンイ...
1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...