jQuery implements simple operation of checkbox
This article mainly introduces the simple operation of jQuery to implement checkbox. It has certain reference and learning for selecting all, not selecting all, and not selecting all of the checkbox group. The value of jquery. Friends who are interested in jquery can refer to this article
Select all, unselect all, and select none of the check box group, and obtain the value of the selected check box
1. Click the Select All button to select all the check box groups or cancel them all.
2. Realize the linkage between the select all button and the check box group. When one of the check box groups is not selected, the select all button with id='checkedAll' should be unchecked; when the check box group Once all are selected, the Select All button should also be selected.
3. Get the value of the selected check box.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对复选框组的全选操作</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/*全选
全选cheched和下方的checkbox按钮的checked是一致的，
故可用this.checked。
注意：$(this).checked是错的
*/
$('#checkedAll').click(function() {
$('[name=item]:checkbox').prop('checked', this.checked);
});
/*判断复选框的总数，是否和选中的复选框的数量相等
相等：全选了
不相等：没有全选
*/
$('[name=item]:checkbox').click(function() {
/*得到的是ul下 name=item 的复选框数组*/
var $checkedArray = $('[name=item]:checkbox');
/*$checkedArray.filter(':checked') -----> 已经选择的复选框 */
$('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length);
});
});
</script>
<script type="text/javascript">
$(function () {
//获取已选的复选框的值
var checkedArray = new Array();//放已经选择的checkbox的value
var count;//已经选择的个数
$('#btn_submit').click(function() {
checkedArray.length=0;
count=0;
$('[name=item]:checkbox:checked').each(function() {
checkedArray.push($(this).val());
count++;
});
if (checkedArray.length==0) {
alert("Please check one at least.");
return;
}
confirm("已选复选框的值："+checkedArray+"\n"+"选中的复选框个数："+count);
});
})
</script>
</head>
<body>
<form action="#" method="POST">
<input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label>
<ul>
<li><input type="checkbox" name="item" value="basketball">篮球</li>
<li><input type="checkbox" name="item" value="football">足球</li>
<li><input type="checkbox" name="item" value="badminton">羽毛球</li>
<li><input type="checkbox" name="item" value="pingpong">兵乓球</li>
<li><input type="checkbox" name="item" value="swimming">游泳</li>
<li><input type="checkbox" name="item" value="running">跑步</li>
</ul>
<button type="button" id="btn_submit" value="提交button">提交</button>
</form>
</body>
</html>Regarding the deficiencies in the code and the areas that are not concise enough, they can be further optimized. If you have any better ideas and implementation methods, you are welcome to exchange and learn together.
Related recommendations:
javascript Determine whether the user has operated the page
Detailed explanation of multiple inheritance examples in JavaScript
JavaScript to implement quick sort analysis
The above is the detailed content of jQuery implements simple operation of checkbox. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
Linux Deploy operation steps and precautions
Mar 14, 2024 pm 03:03 PM
LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install
Huawei Mate60 Pro screenshot operation steps sharing
Mar 23, 2024 am 11:15 AM
With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
PHP string manipulation: a practical way to effectively remove spaces
Mar 24, 2024 am 11:45 AM
PHP String Operation: A Practical Method to Effectively Remove Spaces In PHP development, you often encounter situations where you need to remove spaces from a string. Removing spaces can make the string cleaner and facilitate subsequent data processing and display. This article will introduce several effective and practical methods for removing spaces, and attach specific code examples. Method 1: Use the PHP built-in function trim(). The PHP built-in function trim() can remove spaces at both ends of the string (including spaces, tabs, newlines, etc.). It is very convenient and easy to use.
How to bind WeChat on Ele.me
Apr 01, 2024 pm 03:46 PM
Ele.me is a software that brings together a variety of different delicacies. You can choose and place an order online. The merchant will make it immediately after receiving the order. Users can bind WeChat through the software. If you want to know the specific operation method , remember to check out the PHP Chinese website. Instructions on how to bind WeChat to Ele.me: 1. First open the Ele.me software. After entering the homepage, we click [My] in the lower right corner; 2. Then in the My page, we need to click [Account] in the upper left corner; 3. Then come to the personal information page where we can bind mobile phones, WeChat, Alipay, and Taobao. Here we click [WeChat]; 4. After the final click, select the WeChat account that needs to be bound in the WeChat authorization page and click Just [Allow];
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
Astar staking principle, income dismantling, airdrop projects and strategies & operation nanny-level strategy
Jun 25, 2024 pm 07:09 PM
Table of Contents Astar Dapp Staking Principle Staking Revenue Dismantling of Potential Airdrop Projects: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap Staking Strategy & Operation "AstarDapp Staking" has been upgraded to the V3 version at the beginning of this year, and many adjustments have been made to the staking revenue rules. At present, the first staking cycle has ended, and the "voting" sub-cycle of the second staking cycle has just begun. To obtain the "extra reward" benefits, you need to grasp this critical stage (expected to last until June 26, with less than 5 days remaining). I will break down the Astar staking income in detail,
