How to select all in javascript-Front-end Q&A-php.cn

How to select all in javascript

王林

Release： 2023-05-16 09:04:37

Original

776 people have browsed it

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>

Copy after login

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

Copy after login

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 <input> element, as shown below:

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

Copy after login

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!