HTML で JavaScript の全選択/全選択解除操作を実行するサンプル コード

HTML で JavaScript の全選択/全選択解除操作を実行するサンプル コード

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>無題のドキュメント</title>
<script type="text/javascript" language="javascript">
関数 selectAllDels()
{
var allCheckBoxs = document.getElementsByName("preDelCheck");
var desc = document.getElementById("allChecked");
var selectOrUnselect=false;
for(var i = 0; i < allCheckBoxs.length; i++)
{
すべてのチェックボックスがチェックされている場合
選択または選択解除=true;
壊す;
}
}
if (選択または選択解除)
{
_allUnchecked(すべてのチェックボックス);
}それ以外
{
_allchecked(すべてのチェックボックス)
}
}
関数 _allchecked(allCheckBoxes){
for(var i = 0; i < allCheckBoxs.length; i++)
{
すべてのチェックボックス[i]がチェックされている = true;
}
}
関数 _allUnchecked(allCheckBoxes){
for(var i = 0; i < allCheckBoxs.length; i++)
{
すべてのチェックボックス[i].checked = false;
}
}
</スクリプト>
</head>
<本文>
<p>テスト</p>
<フォーム>
<input type="checkbox" name="preDelCheck" value="cream">ID1

<input type="checkbox" name="preDelCheck" value="sugar" >ID2

<input type="checkbox" name="preDelCheck" value="sugar">ID3

<input type="checkbox" name="preDelCheck" value="sugar">ID4

<input type="checkbox" name="preDelCheck" value="sugar">ID5

<input type="button" id="allChecked" value="すべて選択/すべて選択解除" onClick="selectAllDels()">
</フォーム>
</本文>
</html>

<<:  ウェブページ作成によく使われる英語フォント

>>:  nginx 用の zabbix 5.0 をインストールして展開する方法

推薦する

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...

CentOS 7 に MySQL 8 をインストールするための詳細なチュートリアル

準備するこの記事の環境情報: ソフトウェアバージョンセントOSセントOS7.4マイグレーション8.0...

HTML テーブルタグチュートリアル (46): テーブルフッタータグ

<tfoot> タグは、テーブル フッターのスタイルを定義するために使用されます。基本構...

MySQL テーブルとデータベースでデータを分割する方法

目次1. 縦方向のスライス1.1 垂直データベース1.2 垂直テーブル分割2. 水平(横断)セグメン...

ランダム点呼 Web ページを実装するための JavaScript

JavaScriptは、参考のためにランダムな点呼Webページを作成します。具体的な内容は次のとお...

指定された期間内のすべての日付または月を取得する MySQL ステートメント (ストアド プロシージャの設定やテーブルの追加は不要)

mysql は期間内のすべての日付または月を取得します1: mysqlは期間内のすべての月を取得し...

Vue+Springbootでインターフェースシグネチャを実装するためのサンプルコード

1. 実装のアイデアインターフェース署名の目的は、リクエストパラメータが改ざんされていないか、リクエ...

CSSでemを開く正しい方法の詳細な説明

「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...

JS はシンプルなカレンダー効果を実装します

この記事では、シンプルなカレンダー効果を実現するためのJSの具体的なコードを参考までに紹介します。具...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

MySQLの構文、特殊記号、正規表現の詳細な説明

Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

目次1. classList属性2. 実用化以前の JavaScript では、最初にクラス属性を取...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明

1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...