jquery全选/jquery全不选/jquery反选

最新推荐文章于 2023-07-18 11:18:07 发布
最新推荐文章于 2023-07-18 11:18:07 发布
阅读量250 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery checkbox javascript w3c js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemqs0123/article/details/41675335
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>全选，不全选，反选</title>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#selectAll").click(function () {//全选
                $("#playList :checkbox").attr("checked", true);
            });

            $("#unSelect").click(function () {//全不选
                $("#playList :checkbox").attr("checked", false);
            });

            $("#reverse").click(function () {//反选
                $("#playList :checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
        });
    </script>
</head>
<body>
    <div id="playList">
        <input type="checkbox" value="歌曲1" />歌曲1<br />
        <input type="checkbox" value="歌曲2" />歌曲2<br />
        <input type="checkbox" value="歌曲3" />歌曲3<br />
        <input type="checkbox" value="歌曲4" />歌曲4<br />
        <input type="checkbox" value="歌曲5" />歌曲5<br />
        <input type="checkbox" value="歌曲6" />歌曲6
    </div>
    <input type="button" value="全选" id="selectAll" />
    <input type="button" value="全不选" id="unSelect" />
    <input type="button" value="反选" id="reverse" />
</body>
</html>

转载来源

卡卡资源网

rorg
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用Jquery来实现全选/全不选，反选。
Casset。
10-21 265
jQuery代码全选/全不选反选 全选/全不选 $(function() {//全选和全不选 $("#all").on("click",function() {//当我们点击按钮时 if (this.checked==true) {//如果复选框是选中的 $("input[name='id']").attr("checked","checked");//我们就让name=’id’...
Jquery如何实现全选和反全选
weixin_52503404的博客
12-23 450
Jquery如何实现全选和反全选 首先是HTML的代码 <div> 全选<input type="checkbox" id="all"> </div> <ul id="ul"> <li> 商品1<input type="checkbox" value="11" class="dj"> </li> <li&gt
基于jquery实现复选框全选，反选，全不选等功能
11-26
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 <input ty
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 777
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1487
input type="checkbox" name="items" value="羽毛球" />羽毛球。<input type="checkbox" name="items" value="乒乓球" />乒乓球。<input type="checkbox" name="items" value="足球" />足球。<input type="checkbox" name="items" value="篮球" />篮球。//全选/全部选复选框的状态也变成选中状态。//所有复选框的状态都变成选中状态。
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
JS全选与反选
qq_34082921的博客
09-10 1557
【代码】JS全选与反选的代码实现。
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
解决JQuery全选/反选第二次失效的问题
10-19
在JavaScript和jQuery开发中，全选/反选功能是一个常见的需求，特别是在表格或者多选列表中。当用户点击一个主复选框（如“全选”按钮）时，所有子复选框应相应地被选中或取消选中。然而，在实际应用中，可能会遇到...
jQuery 全选/反选以及单击行改变背景色实例
10-27
通过jQuery实现全选或反选以及单击行改变背景色，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
jquery全选/全不选/反选另一种实现方法(配合原生js)
10-27
接下来，我们需要监听用户对“全选/不选”和“反选”按钮的操作。这可以通过jQuery的`$(document).ready()`函数来实现，当文档加载完成时执行其中的代码： ```javascript $(document).ready(function(){ // ... })...
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1028
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JavaScript 实现全选、全不选和反选功能
不抛弃、不放弃：Aaron莫言
07-18 1799
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
【jQuery】实现全选和反选
Ai-Fairy的博客
09-01 227
利用jquery实现全选和反选。
Jquery实现全选全不选
qq_46112274的博客
01-10 1918
$(function(){ // 1、全选 全不选功能模块 //就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了 // 事件可以使用change $(".checkall").change(function(){ // console.log($(this).prop("checked")); $(".j-checkbox, .checkall").prop("checked",$(this).pr.
补充上一篇：jQuery实现全选，反选，取消操作
lf1949的博客
03-27 1256
这篇文章是对上一篇文章的修改 上一篇文章：点击跳转至上一篇文章 在上一篇文章中我提到过没有理解取消操作的作用 以下是我的修改： 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery库--> <script src="js/jquery-3.6.0.mi
js 实现全选和反选
PSG_li的博客
05-05 170
点击总按钮，实现按钮列表的全选和反选 根据按钮列表来设置总按钮是否选中 若按钮列表都已选中，则总按钮自动选中 若按钮列表有一个未选中，则总按钮不会选中
jquery实现全选和反选
m0_56398485的博客
08-29 1605
需求：点击全选，后面所有checkbox状态选中，当后面有一个checkbox状态没有选中时，全选取消。当后面有所有checkbox状态选中时，前面全选状态选中 ，下面就为大家实现这个效果。大家用之前记得下载一下jquery文件哦。......
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1731
这种情况在购物车中尤为常见
jquery全选反选不选
最新发布
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： 1. 全选： ```javascript $("#selectAll").click(function(){ $("#checkBoxList :checkbox").prop("checked", true); }); ``` 2. 反选： ```javascript $("#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

rorg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值