ホームページ >ウェブフロントエンド >フロントエンドQ&A >すべてのjqueryチェックボックスをオフにします
すべてのjqueryチェックボックスをオフにします
- WBOYオリジナル
- 2023-05-25 10:16:37572ブラウズ
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 サイトの他の関連記事を参照してください。