jqueryを使用して全選択機能と全選択解除機能を実装する方法

jquery を使用して全選択および選択解除関数を実装する方法: まず、jquery ライブラリを導入し、jquery の読み込み関数を設定します。次に、id に基づいて全選択ボックスの要素を取得し、全選択ボックス Event をクリックして、最後にクラス属性値が checkOne である複数選択ボックスを取得します。

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

推奨: jquery ビデオ チュートリアル

jquery を使用してすべて選択および選択解除関数を実装する方法:

1. HTML を作成し、次に示すコードを body タグに追加します。これは主にテーブルに複数選択ボックスを含めるためです。

#2. それではまず、jqueryライブラリを導入します。 jqueryライブラリの書き方に注意してください。 <script src="js/jquery-1.8.3.js"></script>は、

のように書くことはできません。 #<script src="js/jquery-1.8.3.js"></script>この方法です。それ以外の場合は無効です。 2 つの違いを試してみることができます。

html5 は type="text/javascript"

3 を追加する必要はなく、jquery の読み込み関数があります。読み込み関数は jquery の関数です。標準構成。以下の方法は比較的簡略化されています。

#4. 次に、ID に基づいて全選択ボックスの要素を取得し、クリック イベントを全選択ボックスにバインドします。

5. クリック イベント メソッドを完了します: クラス属性値が checkOne である複数選択ボックスを取得し、次に prop (property, value) メソッドを使用してselected 属性 [すべて選択]/[すべてチェック解除]ボックスでチェックしたものと同じに設定します。

#6. 上記の手順で、jquery を使用して、すべてを選択する機能とすべてを選択しない機能を実装することが完了しました。この HTML をブラウザーで実行して、次のように効果を確認します。

関連する学習に関する推奨事項: js ビデオ チュートリアル

以上がjqueryを使用して全選択機能と全選択解除機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。