JavaScriptですべてを選択する方法-フロントエンドQ&A-php.cn

JavaScriptですべてを選択する方法

王林

リリース： 2023-05-16 09:04:37

オリジナル

780 人が閲覧しました

JavaScript の全選択機能は、Web フロントエンド開発で非常に一般的です。これにより、ユーザーはすべてのオプションを一度に簡単に選択できるため、ページの対話性とユーザーエクスペリエンスが向上します。 JavaScript のすべて選択関数を実装する方法を学びましょう。

まず、HTML で「すべて選択」チェックボックスと、選択する必要があるいくつかのチェックボックスを追加する必要があります。以下はサンプル HTML コードです:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript全选示例</title>
    <script type="text/javascript">
        function selectAll(){
            //TODO:实现全选功能
        }
    </script>
</head>
<body>
    <h3>请选择以下商品</h3>
    <input type="checkbox" id="all" onclick="selectAll()">全选
    <br>
    <input type="checkbox" name="goods[]" value="商品1">商品1
    <input type="checkbox" name="goods[]" value="商品2">商品2
    <input type="checkbox" name="goods[]" value="商品3">商品3
    <input type="checkbox" name="goods[]" value="商品4">商品4
    <input type="checkbox" name="goods[]" value="商品5">商品5
</body>
</html>

ログイン後にコピー

この HTML コードでは、「すべて選択」チェックボックスといくつかの製品チェックボックスが表示されます。次に、すべて選択機能を実装する必要があります。

JavaScript 関数で DOM 要素オブジェクトを使用して、チェックする必要があるすべてのチェックボックスを取得し、その selected 属性を true (チェック済み) に設定できます。サンプルコードは次のとおりです。

function selectAll(){
    var checkboxes = document.getElementsByName('goods[]');
    var allCheckbox = document.getElementById('all');
    for(var i=0; i<checkboxes.length; i++){
        checkboxes[i].checked = allCheckbox.checked;
    }
}

ログイン後にコピー

この JavaScript コードでは、2 つの DOM 要素オブジェクト、document.getElementsByName('goods[]') および document.getElementById( '全て'）＃＃＃。このうち、document.getElementsByName('goods[]') 関数は、name 属性が「goods[]」であるすべてのチェックボックス要素を含む NodeList オブジェクトを返します。 document.getElementById('all') は、id 属性「all」を持つ要素オブジェクトを返します。次に、選択する必要があるすべてのチェックボックスをたどって、そのチェック済み属性をすべて選択チェックボックスのチェック済み属性に設定して、すべて選択機能を実現します。

最後に、ユーザーが [すべて選択] チェックボックスをクリックした後に JavaScript コードがトリガーされるように、HTML コードで

selectAll() 関数を呼び出す必要があります。以下に示すように、selectAll() 関数を 要素の onclick イベントにバインドします。

<input type="checkbox" id="all" onclick="selectAll()">全选

ログイン後にコピー

この時点で、 JavaScriptによる全選択機能の実装。 HTML コードを実行し、「すべて選択」チェックボックスをクリックして、すべてを選択できるかどうかを確認してください。

要約すると、JavaScript の全選択機能を実装するには、全選択チェックボックスと選択する必要があるチェックボックスを HTML に追加し、JavaScript コードを使用して必要なすべてのチェックボックスを設定する必要があります。 selected 属性は、全選択チェックボックスの selected 属性です。このようにして、JavaScript の全選択機能を実装できます。

以上がJavaScriptですべてを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。