checkBox全选全不选

最新推荐文章于 2024-01-03 21:38:58 发布
最新推荐文章于 2024-01-03 21:38:58 发布
阅读量295 收藏
点赞数
分类专栏： javascript&&jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixiaixinxin/article/details/50961510
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
    <script type="text/JavaScript">
       /* function check(){
            var oInput=document.getElementsByName("checkBox2");
            for (var i=0;i<oInput.length;i++)
                oInput[i].checked=document.getElementById("all").checked;
        }*/
       var allCheckbox=document.getElementsByName("checkBox2");
        function check(){
            var allCheckbox=document.getElementsByName("checkBox2");
            for(var p in allCheckbox){
                allCheckbox[p].checked=document.getElementById("all").checked;
            }
        }
        function isAll(){
            /*先定义一个int变量*/
            var count=0;
            for(var i=0;i<allCheckbox.length;i++){
                if(allCheckbox[i].checked==true){
                    count++;
                }
            }
            //alert(""+count+","+allCheckbox.length)
            if(count==allCheckbox.length){
                document.getElementById("all").checked=true;
            }
            if(count!=allCheckbox.length){
                document.getElementById("all").checked=false;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td><input type="checkbox" value="" class="all" id="all" οnclick="check()">全选</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="java" name="checkBox2" class="checkBox1" οnclick="isAll()">java</td>
        <td><input type="checkbox" value="锋利的jquery" name="checkBox2" class="checkBox1"  οnclick="isAll()">锋利的jquery</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="javascript" name="checkBox2"  class="checkBox1" οnclick="isAll()">javascript</td>
        <td><input type="checkbox" value="css从入门到放弃" name="checkBox2" class="checkBox1"  οnclick="isAll()">css从入门到放弃</td>
    </tr>
</table>

</body>
</html>
xixiaixinxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1439
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
如何实现全选checkbox效果
weixin_30865427的博客
09-18 444
效果图： 简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。 这一点很容易实现。 但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。 这一点会有问题，笔者遇到的就是可以取消【...
checkbox的全选实现
qq_41333410的博客
01-21 5014
1. 逻辑梳理 多选按钮点击事件：如果元素被选中，循环子项，设为选中；否则，循环子项，设为不选。 子项按钮点击事件：定义是否存在未选择子项flag，默认false。循环子项，如果未选择，修改flag为true。循环结束，如果flag=true，全选按钮不选，否则选中。 2. 页面实现 JS部分 //全选按钮点击事件 function allCheck(allBoxName,itemBoxName) { if($("input[name="+allBoxName+...
checkbox实现全选的多种方法（转）
a651944226的专栏
12-22 759
checkbox实现全选的多种方法
weixin_45659847的博客
08-13 1156
<script language=javascript> //第一种方法 function selectall1() { var a = document.getElementsByTagName("input"); if(a[0].checked==true){ for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked = false; }
jquery实现checkbox全选全不选的简单实例
10-26
本篇文章主要是对jquery实现checkbox全选全不选的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
基于JQuery实现CheckBox全选全不选
10-28
做项目时需要实现CheckBox的全选，我想用JQuery实现，从网上找了找，网上的确有很多例子，但都不能实现我想要的全部效果
jQuery实现CheckBox全选、全不选功能
11-28
废话不多说了，直接给大家贴代码了，具体代码如下所示： <...jQuery实现CheckBox全选、全不选</title> [removed][removed] [removed] $(function() { $(':checkbox').click(function(evt)
复选框的全选、全不选和反选
weixin_57762552的博客
04-19 4093
如图： 整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。 HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。 接下来就是本篇文章的重点，JavaScript部分。 按照惯例首先要获取到所有...
js实现checkbox 全选和取消
07-16
js实现checkbox 全选和取消 自己亲测可以使用
checkbox切换全选与全不选
09-25
《锋利的jquery》利用this.checked判断全选与全不选
【复选框checkbox的全选功能（分类全选）】
qq_48968230的博客
06-27 952
复选框的分类全选和总体全选
实现复选框全选和全不选的切换
木木木华的博客
02-10 2036
实现复选框全选和全不选的切换
checkbox全选/全不选的三种方法
sumskyjia的专栏
06-29 1106
checkbox全选/全不选 方法一：   function checkAll(cName) { var code_Values = document.all[checkbox_name]; if (code_Values.length) { for ( var i = 0; i &lt; code_Values.length; i++) { code_Values[i...
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
最新发布
m0_74265396的博客
01-03 966
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面；2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示；3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；实现思路1、获取所勾选的值组成的数组定义一个数组checkValues，存放用户所勾选的内容。再定义一个函数getValues()，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用innerText属性将数组展示到页面中。
前端checkbox全选与全不选
岁月栖迟的博客
09-29 857
js原生代码 //功能1：通过标题行选中状态控制数据行选中状态 function fun1(){ //1.获得标题行checkbox的选中状态 var flag = document.getElementById("one").checked; //2.获得数据行所有checkbox关联的DOM对象 var domArray =document.getElementsByName("ck"); //3.依次对数据行中每一个checkbox的checked属性进
jq实现checkbox全选全不选
05-23
你可以使用以下的代码来实现checkbox全选/全不选的功能： ```javascript // 全选/全不选 $('#all').click(function() { $('input[name="checkbox"]').prop('checked', this.checked); }); // 单个checkbox点击...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值