すべてのjqueryチェックボックスをオフにします

WBOY
リリース: 2023-05-25 10:16:37
オリジナル
476 人が閲覧しました

jQuery のチェックボックスがすべてオフになっている

Web ページの開発では、チェックボックスがよく使用されます。チェックボックスの機能は、ユーザーが 1 つ以上のオプションを選択できるようにすることです。通常、ユーザーがすべてのオプションを一度に選択できるように「すべて選択」ボタンを提供しますが、場合によっては、ユーザーがすべてのオプションを一度にキャンセルできるように「すべて選択を解除」ボタンも提供する必要があります。

今回はjQueryを使ってチェックボックスの選択解除機能を実現する方法を紹介します。

  1. HTML コード

まず HTML コードを見てみましょう。このコードには、3 つのチェック ボックスと 2 つのボタン (すべて選択とすべて選択解除) が含まれています。

   jQuery复选框全不选  

请选择你喜欢的水果:

苹果
香蕉
橙子

ログイン後にコピー
  1. jQuery コード

次に、jQuery を使用して、何も選択しない関数を完成させます。まず、すべてのチェック ボックスを取得し、次にこれらのチェック ボックスを繰り返し処理して、その「checked」属性を false に設定する必要があります。

$(function(){ $("#btnCheckNone").click(function(){ $("input[type='checkbox']").each(function(){ $(this).prop("checked", false); }); }); });
ログイン後にコピー

上記のコードでは、まず jQuery セレクターを使用してすべてのチェック ボックスを取得し、次に「each」メソッドを使用してこれらのチェック ボックスを走査します。走査プロセス中に、「prop」メソッドを使用して「checked」属性を false に設定し、すべてを選択しない機能を実現します。

  1. まとめ

この記事では、jQueryを使ってチェックボックスの選択解除機能を実現する方法を紹介します。すべてのチェックボックスの「チェック済み」属性を false に設定すると、すべてのオプションを一度にキャンセルできるため、より便利なユーザー エクスペリエンスが提供されます。コードはシンプルで理解しやすく、実際の開発に簡単に適用できます。

以上がすべてのjqueryチェックボックスをオフにしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!