使用jQuery写全选和反选案例

最新推荐文章于 2021-12-28 23:36:10 发布

程有财

最新推荐文章于 2021-12-28 23:36:10 发布

阅读量289

点赞数 2

分类专栏： jQuery 文章标签： jQuery js java

本文链接：https://blog.youkuaiyun.com/qq_44795340/article/details/89193882

版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用JS和jQuery实现全选、全不选及反选功能的两种方法。通过按钮点击事件，控制多个复选框的状态，适用于网页表单操作。第一种方法纯jQuery实现，第二种方法结合JS与jQuery。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用js和jQuery写一个全选的案例

效果图：
在这里插入图片描述

html代码：

<input type="button" value="全选">
<input type="button" value="全不选">
<input type="button" value="反选">
<br />
<input type="checkbox" name="s">春
<br />
<input type="checkbox" name="s">夏
<br />
<input type="checkbox" name="s">秋
<br />
<input type="checkbox" name="s">冬

jQuery代码：

$(function(){
$(":button:eq(0)").click(function(){
$(":checkbox").prop(“checked”,true);
})
$(":button:eq(1)").click(function(){
$(":checkbox").prop(“checked”,false);
})
$(":button:eq(2)").click(function(){
$(":checkbox").each(function() {
var flag = $(this).prop(“checked”);
$(this).prop(“checked”, !flag);
})
})
})

第二种方法：js和jQuery并用

<input type="button" value="全选" "quan();">
<input type="button" value="全不选" "bu();">
<input type="button" value="反选" "fan();">
<br />
<input type="checkbox" name="s">春
<br />
<input type="checkbox" name="s">夏
<br />
<input type="checkbox" name="s">秋
<br />
<input type="checkbox" name="s">冬

js和jQuery代码
就只会这两种方法，如果有大佬会更简单的希望教教我!