Home >Web Front-end >Front-end Q&A >Uncheck all jquery checkboxes
Uncheck all jquery checkboxes
- WBOYOriginal
- 2023-05-25 10:16:37572browse
jQuery checkboxes are all unchecked
In developing web pages, checkboxes are often used. The function of the checkbox is to allow the user to select one or more options. Normally, we will provide a "Select All" button so that users can select all options at once, but sometimes, we also need to provide a "Deselect All" button so that users can cancel all options at once.
In this article, we will introduce how to use jQuery to realize the unselect function of the check box.
- HTML code
Let’s take a look at the HTML code first, which contains three check boxes and two buttons: select all and unselect all.
<!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 code
Next, we use jQuery to complete the function of selecting nothing. First, we need to get all the check boxes, then iterate through these check boxes and set their "checked" attribute to false in turn.
$(function(){
$("#btnCheckNone").click(function(){
$("input[type='checkbox']").each(function(){
$(this).prop("checked", false);
});
});
});In the above code, we first use the jQuery selector to get all the check boxes, and then use the "each" method to traverse these check boxes. During the traversal process, we use the "prop" method to set their "checked" attribute to false, so that the function of not selecting all can be achieved.
- Summary
This article introduces how to use jQuery to realize the unselect function of the check box. By setting the "checked" attribute of all checkboxes to false, we can cancel all options at once, providing a more convenient user experience. The code is simple and easy to understand and can be easily applied to actual development.
The above is the detailed content of Uncheck all jquery checkboxes. For more information, please follow other related articles on the PHP Chinese website!