html全选和取消全选JS

最新推荐文章于 2023-05-17 15:38:46 发布
最新推荐文章于 2023-05-17 15:38:46 发布
阅读量109 收藏
点赞数
文章标签： javascript ViewUI 
<html>  
<body>  
  
    <table border="1">  
        <tr>  
            <th><input type="checkbox" οnclick="swapCheck()" /></th>  
            <th>Month</th>  
            <th>Savings</th>  
        </tr>  
        <tr>  
            <td><input type="checkbox" /></td>  
            <td>January</td>  
            <td>$100</td>  
        </tr>  
        <tr>  
            <td><input type="checkbox" /></td>  
            <td>February</td>  
            <td>$150</td>  
        </tr>  
    </table>  
  
    <script type="text/javascript"  
        src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>  
  
    <script type="text/javascript">  
        //checkbox 全选/取消全选  
        var isCheckAll = false;  
        function swapCheck() {  
            if (isCheckAll) {  
                $("input[type='checkbox']").each(function() {  
                    this.checked = false;  
                });  
                isCheckAll = false;  
            } else {  
                $("input[type='checkbox']").each(function() {  
                    this.checked = true;  
                });  
                isCheckAll = true;  
            }  
        }  
    </script>  
  
</body>  
</html>

 效果图：

weixin_34121304
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js：全选和反选
Jessicawh的博客
07-15 240
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: .
【JS】复选框的全选和取消全选
zuncle的博客
02-09 9541
测试代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head> <body> <div class="first"> <ul c
html实现选择框的全选与反选
fzxyxf1314的博客
10-20 1530
html中的全选和反选功能的实现
HTML、CSS、Jquery综合练习之全选、全不选与反选
weixin_61399134的博客
05-17 637
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项。反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态。CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分。全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态。全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态。
vueH5级联组件，实现全选，非全选
manda Liu的博客
03-01 413
vueH5级联组件，实现全选，非全选。
JavaScript：复选框的全选和取消全选
weixin_56283510的博客
09-27 632
思路简洁，内容注释充实，若发现错误请联系我
html中的javascript 全选/取消全选操作示例代码
12-13
html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>无标题文档</title> [removed] function selectAllDels() { var allCheckBoxs = ...
jquery操作checkbox实现全选和取消全选
10-26
在jQuery中，操作复选框（checkbox）进行全选和取消全选是常见的前端交互功能，主要用于批量选择或批量操作。下面将详细讲解如何利用jQuery实现这一功能。 首先，我们来理解复选框（checkbox）的基本操作。在HTML中...
html css js表单中全选取消反选效果
11-11
以上就是使用HTML、CSS和JavaScript实现全选、取消全选及反选功能的基本步骤。这个功能在实际项目中非常实用，尤其是在涉及用户多选操作的场景，如购物车选择、设置选项等。通过结合这三个核心技术，你可以创建出...
js multiple全选与取消全选实现代码
10-27
本文将详细讲解如何利用JavaScript（包括jQuery）实现多选框（multiple）的全选和取消全选功能。 首先，我们需要理解HTML中的`<select>`元素和`<option>`子元素。`<select>`用于创建下拉列表，`multiple`属性使得...
全选按钮制作javascript脚本.html
05-26
用javascript编译的全选按钮制作javascript脚本.html
html全选反选
12-06
很简单的html全选反选，适合刚开始学习html的同学，非常实用。
js实现checkbox 全选和取消
07-16
js实现checkbox 全选和取消 自己亲测可以使用
js实现复选框的全选和取消全选效果
10-20
JavaScript 实现复选框全选和取消全选的效果是一个常见的前端交互功能，广泛应用于数据筛选、表单提交等场景。本文将深入解析如何利用 JavaScript 和 jQuery 来完成这一功能。 首先，HTML 结构中通常会有一个全选...
【JavaScript】-- 利用JS实现全选/取消全选
qq_48802092的博客
08-30 3122
实现要求： 点击"全选"框，以下所有选项全部勾选。 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。 当其他复选框全部选中，"全选框"为选中状态。 当其他复选框有一个未选中，"全选框"取消选中状态。...
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 616
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS基础-全选与取消全选案例
qq_43781887的博客
04-16 2895
主要需要完成的功能有两个： 1.选择上面的全选按钮之后下面的按钮全部被选中，取消全部的按钮就取消全选。 2.每次点击下面按钮就去检查是不是所有的按钮都选中了,要是所有的按钮都选中了把最上面的全选按钮就要选中,要是有一个没选中上面全选按钮就不选中。 实现思路： 1.针对第一个功能，可以采用一个flag变量来判断，设置初始值为0也就是全选按钮不选中，然后点击全选按钮判断，判断flag是否为0，如果为0就把所有的下面按钮选中，同时把flag变为1，如果flag为1，则把下面的按钮的checked都变为..
Checkbox全选反选
weixin_43332393的博客
09-27 1124
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
H5+JS表格全选和删除
qq_34856792的博客
12-12 699
H5+JS表格全选和删除
html5全选和取消全选
最新发布
10-09
在HTML5中，可以使用JavaScript来实现全选和取消全选的功能。以下是一个示例代码： ```html <!DOCTYPE html> <html> function selectAll() { var checkboxes = document.getElementsByName('checkbox'); for ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值