您的位置是:网站首页>Javascript编程Javascript编程

怎么用jquery做全选删除

少儿编程网2021-05-31 15:53:47Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介用jquery做全选删除的方法:首先创建一个html代码示例文件;然后修改jquery代码;最后通过“$(.seleAll).on(click,function(){...}”方法实现全选删除功能即可。本教程操作环境:windows7系统、jquery

用jquery做全选删除的方法:首先创建一个html代码示例文件;然后修改jquery代码;**后通过“$(".seleAll").on("click", function(){...}”方法实现全选删除功能即可。NMA少儿编程网-https://www.pxcodes.com

NMA少儿编程网-https://www.pxcodes.com

本教程操作环境:windows7系统、jquery1.10.0版本,该方法适用于所有品牌电脑。NMA少儿编程网-https://www.pxcodes.com

推荐:《jquery视频教程》NMA少儿编程网-https://www.pxcodes.com

用jquery实现全选删除功能NMA少儿编程网-https://www.pxcodes.com

html代码NMA少儿编程网-https://www.pxcodes.com

<div class="box">
<ul>
<li><input type="checkbox" /> 少小离家胖了回</li>
<li><input type="checkbox" /> 乡音无改肉成堆</li>
<li><input type="checkbox" /> 儿童相见不相识</li>
<li><input type="checkbox" /> 笑问胖子你是谁</li>
</ul>
<div>
<input type="button" class="seleAll" value="全选" />
<input type="button" class="reverse" value="反选" />
<input type="button" class="op" value="全不选" />
<input type="button" class="del" value="删除" />
</div>
</div>

jquery代码NMA少儿编程网-https://www.pxcodes.com

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//全选
$(".seleAll").on("click", function() {
var oin = $("input[type='checkbox']")
oin.each(function() {
$(this).prop("checked", true)
})
})
//全不选
$(".op").on("click", function() {
var oin = $("input[type='checkbox']")
oin.each(function() {
$(this).prop("checked", false)
})
})
// 反选 
$(".reverse").on("click", function() {
// 获取节点 
var oin = $("input[type='checkbox']")
oin.each(function() {
this.checked = !this.checked
})
})
// 批量删除 
$(".del").on("click", function() {
var sele = $(":checkbox:checked")
if(sele.length > 0) {
sele.each(function() {
$(this).parent().remove()
})
} else {
alert("至少选一个数据")
}
})
</script>

运行效果:NMA少儿编程网-https://www.pxcodes.com

以上就是怎么用jquery做全选删除的详细内容,更多请关注少儿编程网其它相关文章!NMA少儿编程网-https://www.pxcodes.com

来源:php中文网NMA少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

怎么用jquery做全选删除

      匿名评论
    • 评论
    人参与,条评论
    怎么用jquery做全选删除

微信公众号

免费视频教程

先知道