JavaScriptですべてを選択する方法
全選択を実装する Javascript メソッド: 1. HTML と CSS を使用してフォームを作成します; 2. DOM メソッドを使用して、全選択と単一選択の「入力」要素をそれぞれ取得します; 3. variable isAllChecked; 4. isAllChecked の値を「すべて選択」ボタンに割り当てます。
この記事の動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
javascript すべてを選択するにはどうすればよいですか?
JS を使用して、次の形式で完全選択と逆選択を実装します。
これは、一般的な電子商取引ですべてを選択する演習でもあります。 (逆選択機能を備えたショッピング カートは少ないようですが、Windows エクスプローラーには逆選択機能があります)
では、逆選択機能を追加してみましょう。すべて選択から開始します:
DOM メソッドを使用して、完全選択と単一選択の「入力」要素をそれぞれ取得します。すべての選択に 1 つを使用します。直接使用します。getElementById() だけで十分です (ID は事前に設定されています)。ラジオの選択は 4 つあります。取得するには getElementByClassName() を使用します (クラスは事前に設定されています)。もちろん、得られるのは配列です。 取得した要素を変数に代入し、for ループを使用して配列を走査し、すべてを選択する変数のchecked属性を、単一選択された各変数のchecked属性に割り当てます。 この時点で、2と3は同時に解決されており、コードは次のとおりです:
製品の 4 行すべてがチェックされている場合は、「すべて選択」が自動的にチェックされ、いずれかの製品がチェックされていない場合は、「すべて選択」が自動的にチェックされます。キャンセル。
- #商品の 4 行すべてにチェックが入っていない場合は、「すべて選択」にチェックを入れて、商品の 4 行すべてにチェックを入れます。 「すべて選択」にチェックを入れ、「すべて選択」のチェックを外すと、すべての商品のチェックが外れます。
- 最初に要件 2 と 3 について話しましょう。ロジックは比較的単純です:
要件を整理したら、まず HTML と CSS を使用してこのフォームを描画します。コードは次のとおりです。マウスクリックイベントの関数 名前を付けたら、全選択の場合は「funcAll()」、単一選択の場合は「funcOne()」、逆選択の場合は「funcBackward()」とします。 CSS 部分は主にフォームに境界線を追加し、同時に接合部の境界線をブレンドする、基本的に最も単純な外観です。
<html>
<head>
<meta charset="utf-8">
<title>全选2</title>
<style type="text/css">
.wrap{
margin-left: 500px;
margin-top: 200px;
}
table{
border-collapse:collapse;
}
th{
border:1px solid black;
height: 45px;
}
td{
border:1px solid black;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<table cellspacing="0" cellpadding="14">
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll" onclick="funcAll()">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPhone X</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPad pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPad air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>Apple watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" id="backwardOption" value="反选" onclick="funcBackward()">
</div>
</body>
</html>function funcAll(){
var selectAll = document.getElementById('selectAll');
var selectOnes = document.getElementsByClassName('selectOne');
for (var i = 0; i < selectOnes.length; i++) { //循环遍历，把全选框的值赋给每个单选框
selectOnes[i].checked = selectAll.checked;
}
}項目 1 は、実際には非常に簡単に実装できます。反転ボタンをクリックして、4 つのラジオ ボタンを順番に切り替えて、各要素に対応するチェックされた属性を反転します。 ただし、以前に実装したすべての単一項目の全選択リスナーは、実際には各ラジオ ボタンのクリック イベントに実装されます。つまり、ラジオ ボタンをクリックして単一項目を変更しない場合、 , 選択ボタン「すべて選択」の状態は、実際にはグローバルには監視されません。 したがって、反転選択マウス クリック関数に監視コードを書き込むことができます。最終的なコードは次のとおりです:
最終的な効果は次のとおりです:function funcOne(){ var selectAll = document.getElementById('selectAll'); //函数作用域，所以得再定义一遍 var selectOnes = document.getElementsByClassName('selectOne'); var isAllChecked = true; //定义一个变量作为桥梁来控制全选按钮 for (var i = 0; i < selectOnes.length; i++) { if (selectOnes[i].checked === false) { isAllChecked = false; break; } } selectAll.checked = isAllChecked; }ログイン後にコピー推奨学習: 「
js 基礎チュートリアル」
以上がJavaScriptですべてを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7518
15
1378
52
81
11
21
68
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
JavaScriptでinsertBeforeを使用する方法
Nov 24, 2023 am 11:56 AM
使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。
JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築
Dec 17, 2023 am 08:41 AM
JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワーク プロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラ デバイスがあるとします。
