JavaScriptはすべての選択と選択解除の操作を実装します
|
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 効果例デフォルトでは:
「すべて選択」をチェックした場合:
項目A/項目B/項目Cのチェックを任意に外すと
実装コード
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>すべて選択</title>
<スクリプト>
関数myAll() {
var all = document.getElementById("all");
var oneList = document.getElementsByName("one");
for(var i = 0; i < oneList.length; i++) {
oneList[i].checked = all.checked;
}
}
関数myOne() {
var all = document.getElementById("all");
var oneList = document.getElementsByName("one");
for(var i = 0; i < oneList.length; i++) {
if(oneList[i].checked == false) {
すべてチェック済み = false;
戻る;
}
}
すべてチェック済み = true;
}
</スクリプト>
</head>
<本文>
<テーブル id="myTable" 境界線="1" セルパディング="0" セル間隔="0" 幅="90%" 高さ="180px">
<tr>
<th>すべて選択<input id="all" type="checkbox" onclick="myAll()" /></th>
<th>シリアル番号</th>
<th>名前</th>
<th>単価</th>
<th>数量</th>
<th>合計</th>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>1</td>
<td>アイテムA</td>
<td>55円</td>
<td>1</td>
<td>55円</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>2</td>
<td>アイテム B</td>
<td>70円</td>
<td>1</td>
<td>70円</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>3</td>
<td>アイテムC</td>
<td>66円</td>
<td>1</td>
<td>66円</td>
</tr>
</テーブル>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos サーバーに MySql をデプロイし、Navicat に接続するプロセスの詳細な説明
推薦する
CocosCreator クラシック エントリー プロジェクト flappybird
目次開発環境ゲームエンジンのコンセプトCocos Creatorについてプロジェクト構造コード編集環...
Centos 7.4 でリモート アクセス制御を実装する方法
1. SSHリモート管理SSH はセキュア チャネル プロトコルであり、主にリモート ログイン、リモ...
CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。
この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...
CentOS7にNginxを素早くインストールする方法を教えます
目次1. 概要2. Nginxインストールパッケージをダウンロードする3. 依存パッケージをインスト...
テーブルはセルとimg画像を結合してtd HTML全体を埋めます
ソースコード（一部のクラスは削除されています）:コードをコピーコードは次のとおりです。 <テー...
Dockerコンテナが停止できない問題の解決方法
解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...
Vueコンポーネントが相互に値を転送する方法の詳細な説明
目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...
Vueでフォームデータを取得する方法
目次必要データを取得して送信するテンプレートフィルターフィルターの使用シナリオ要約する必要Vue を...
CSS の画像パスの問題に関する議論 (同じパッケージ/異なるパッケージ)
CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、...
Vue プロジェクトのパッケージ化と最適化の実装手順
目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...
この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。
イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...
nginx-naxsi ホワイトリストルールの詳細な説明
ホワイトリストルールの構文:基本ルール wl:ID [否定] [mz:[$URL:target_ur...
Vueはシンプルなショッピングカートの例を実装します
この記事では、参考までに、シンプルなショッピングカートケースを実装するためのVueの具体的なコードを...
Dockerサーバーのストレージリソースプール不足問題の解決
目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...
WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装
この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...