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 に接続するプロセスの詳細な説明
推薦する
docker で php+nginx+swoole+mysql+redis 環境を構築する方法
オペレーティングシステム: Alibaba Cloud ESC インスタンス centos7.4ソフ...
MySQLのユーザー権限の確認と管理方法の詳細な説明
この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...
一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録
目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...
アクティビティページでの CSS3 アニメーション効果の適用
背景あっという間に忙しい一年が終わり、毎年恒例のイベントの時期がやってきます。お祭り気分を演出するに...
JS 内の Json 文字列 + Cookie + ローカルストレージ
目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は？ 3. ローカルス...
ウェブページ作成時に標準 HTML コードを使用する際のポイント
<br />多くのウェブサイト デザイナーが犯す最も一般的な間違いは、ウェブページが I...
Vue は better-scroll を使用して水平スクロール方法の例を実現します
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...
antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)
目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...
略語マークと頭字語マーク
<abbr>タグと<acronym>タグは、Web ページに表示される略語と...
MySQL バッチ挿入ループの詳細なサンプルコード
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...
MySQLは集計関数を使用して単一のテーブルをクエリします
集計関数データセットに作用し、そのデータセットの値を返します。 count: 統計結果のレコード数。...
TinyEditorはシンプルで使いやすいHTML WYSIWYGエディタです
数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...
DockerはGitを使用してJenkinsのリリースとテストプロジェクトの詳細なプロセスを実装します
目次1. Dockerをインストールする2. カスタムネットワークアドレスを作成する3. Docke...
MySQL デュアルマシン ホットスタンバイ実装ソリューション [テスト可能]
目次1. コンセプト2. 環境の説明3. マスタースレーブホットスタンバイ実装1. コンセプト1. ...
CSS 動的高さ遷移アニメーション効果の実装
この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーション...