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 に接続するプロセスの詳細な説明
推薦する
Linux でファイル内の特定の文字の数を数える方法
ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...
sed コマンドを使用して文字列を置換する Linux チュートリアル
文字列を置き換えるには、次の形式を使用する必要があります。 $ sed s/置換対象文字列/置換文字...
JS ES6 スプレッド演算子の魔法のような使い方
目次1. 属性を追加する2. 複数のオブジェクトを結合する3. オブジェクトのプロパティを削除する4...
MySQL の最適化: 高品質の SQL 文を書く方法
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
vuex の補助関数 mapGetters の基本的な使い方の詳細な説明
mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...
MySQL マスタースレーブ同期、トランザクションロールバックの実装原理
ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...
JSで実施された機雷掃海プロジェクトの概要
この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...
要素（背景画像）の下に水平線アニメーションを実現するための純粋な CSS
効果画像: html: <div class='site_bar'>ホー...
MySQL データ圧縮パフォーマンス比較の詳細
目次1. テスト環境1.1 ハードウェアとソフトウェア1.2 テーブル構造2. テストの目的2.1 ...
Pure CSS3はdivの出入りを順番に実現します
この記事は主に、純粋な CSS3 を使用して div が順番に出入りする効果を紹介します。一定の参考...
ウィンドウの中央にブロック要素の位置を設定する方法
ウィンドウの中央にブロック要素の位置を設定する方法ブロック要素をウィンドウの中央に配置する上記の方法...
ファイル共有サーバーを構築するための samba + OPENldap の詳細な説明
ここでは、samba (ファイル共有サービス) v4.9.1 + OPENldap (バックエンド ...
リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード
説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...
MySQL でパーセンテージと最初の数パーセントを表示する方法
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...
Centos7 で Java8 と MySQL をインストールしてデプロイする
通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...