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 に接続するプロセスの詳細な説明
推薦する
CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム
システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...
vue3 における vuex と pinia の落とし穴
目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...
Docker で Jenkins サービスを構築する例
画像をプルする root@EricZhou-MateBookProX: docker pull je...
Nginx タイムアウト設定の詳細な説明
最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...
写真とテキストによる MySQL と sqlyog のインストール チュートリアル
1. MySQL 1.1 MySQLのインストールmysql-5.5.27-winx64 ダウンロー...
2つのVirtualBox仮想ネットワークをブリッジするLinuxブリッジメソッドの手順
この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...
Vueはダイアログのカプセル化を実装します
目次Vue2 ライティングVue3プラグインのバージョンの記述Vue3 動的コンポーネントの記述書き...
MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由
1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...
MySQL マルチテーブル結合入門チュートリアル
接続は、実際の外部キー（人工的に作成された 2 つのテーブル間の対応関係を指します。対照的に、FOR...
Vue はタブ ラベルを実装します (ラベルが自動スクロールを超える)
作成されたタブラベルがページの表示領域を超えると、タブラベルの距離だけ自動的にスクロールされます。ま...
CSS の div の下の同じ行にある複数の要素を右揃えにする
方法1:フロート:右さらに、フローティングにするとレイアウトがよりコンパクトになります（隙間がなくな...
Ubuntu 18.04 で apt-get ソースを変更する方法
apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...
Google Chromeの自動入力問題に対する完璧な解決策
Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...
ウェブデザインの教育または学習プログラム
セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...
JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明
目次この期間の目標1. 関数の実装1.1 構造層1.2 スタイルレイヤー1.3 行動層1.3.1 フ...