すべてのjqueryチェックボックスをオフにします-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 25, 2023 am 10:16 AM

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

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

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

HTML コード

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

<!DOCTYPE html>
<html>
<head>
    <title>jQuery复选框全不选</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h2>请选择你喜欢的水果：</h2>
    <input type="checkbox" name="fruit" value="apple">苹果<br>
    <input type="checkbox" name="fruit" value="banana">香蕉<br>
    <input type="checkbox" name="fruit" value="orange">橙子<br>
    <br>
    <button id="btnCheckAll">全选</button>
    <button id="btnCheckNone">全不选</button>
</body>
</html>

ログイン後にコピー

jQuery コード

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

$(function(){
    $("#btnCheckNone").click(function(){
        $("input[type='checkbox']").each(function(){
            $(this).prop("checked", false);
        });
    });
});

ログイン後にコピー

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

まとめ

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。