Home > Article > Web Front-end > How to select all in javascript

How to select all in javascript

王林Original: 2023-05-16 09:04:37770browse

The JavaScript select all function is very common in web front-end development. It allows users to conveniently select all options at once, thereby improving page interactivity and user experience. Let us learn how to implement the JavaScript select all function.

First, we need to add a select all checkbox and some checkboxes that need to be selected in the HTML. The following is a sample HTML code:

<!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>

In this HTML code, we can see a select all checkbox and several product checkboxes. Next, we need to implement the select all function.

We can use the DOM element object in the JavaScript function to get all the check boxes that need to be checked, and then set their checked attribute to true (checked). The sample code is as follows:

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;
    }
}

In this JavaScript code, we use two DOM element objects: document.getElementsByName('goods[]')and document.getElementById( 'all'). Among them, the document.getElementsByName('goods[]') function returns a NodeList object, which contains all check box elements whose name attribute is "goods[]". document.getElementById('all') returns the element object with the id attribute "all". Next, we traverse all the check boxes that need to be selected and set their checked attribute to the checked attribute of the select all check box, thus realizing the select all function.

Finally, we need to call the selectAll() function in the HTML code so that the JavaScript code is triggered after the user clicks the Select All checkbox. We bind the selectAll() function to the onclick event of the d5fd7aea971a85678ba271703566ebfd element, as shown below:

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

At this point, we have completed the JavaScript Implementation of the select all function. Run the HTML code and try clicking the Select All checkbox to see if you can select all.

To summarize, to implement the JavaScript select-all function, we need to add the select-all checkbox and the checkboxes that need to be selected in HTML, and use JavaScript code to set all the checkboxes that need to be selected. The checked attribute is the checked attribute of the select-all check box. In this way, the JavaScript select all function can be implemented.

The above is the detailed content of How to select all in javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 对象事件 dom input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript disable jumpNext article：javascript disable jump

See more

How to select all in javascript

Related articles