用JQuery实现全选与取消的两种简单方法 - Web前端
作者:98wpeu发布时间:2026-06-13分类:网页前端技术浏览:4
导读:用JQuery实现全选和取消全选,没有JS那么繁琐,而且支持更多浏览器。复制代码代码如下:<mce:scripttype="text/javascript"><...
用JQuery实现全选和取消全选,没有JS那么繁琐,而且支持更多浏览器。
复制代码 代码如下:
<mce:scripttype="text/javascript"><!--
$(function() {
$("#checkall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", true);
});
});
$("#delcheckall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", false);
});
});
});
// --></mce:script>
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1
<input type='Checkbox' id='id2' name='checkname[]' value='2' />value2
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3
<input type="button" id="checkall" name="checkall" value="全选" />
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" />
更加简单的一种:
复制代码 代码如下:
$("#checkall").click(
function(){
if(this.checked){
$("input[name='checkname']").attr('checked', true)
}else{
$("input[name='checkname']").attr('checked', false)
}
}
);
复制代码 代码如下:
<mce:scripttype="text/javascript"><!--
$(function() {
$("#checkall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", true);
});
});
$("#delcheckall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", false);
});
});
});
// --></mce:script>
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1
<input type='Checkbox' id='id2' name='checkname[]' value='2' />value2
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3
<input type="button" id="checkall" name="checkall" value="全选" />
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" />
更加简单的一种:
复制代码 代码如下:
$("#checkall").click(
function(){
if(this.checked){
$("input[name='checkname']").attr('checked', true)
}else{
$("input[name='checkname']").attr('checked', false)
}
}
);
相关推荐
- 为jquery的ajaxfileupload增加附加参数的方法 - Web前端
- jquery禁用右键单击功能屏蔽F5刷新 - Web前端
- jquery自动填充勾选框即把勾选框打上true - Web前端
- jquery图片轮播插件仿支付宝2013版全屏图片幻灯片 - Web前端
- jquery选择器之属性过滤选择器详解 - Web前端
- JQuery的Ajax请求实现局部刷新的简单实例 - Web前端
- jquery each的几种常用的使用方法示例 - Web前端
- jquery 图片缩放拖动的简单实例 - Web前端
- jquery清空表单数据示例分享 - Web前端
- 使用JQuery快速实现Tab的AJAX动态载入(实例讲解) - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


