精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

全选与全不选是我们在网站开发过程中必然会遇到的一个小模块,下面青岛星网分别用Jquery与原生JS来实现全选、全不选、反选。

Jquery实现checkbox的反选、全选、全不选

//实现方式一
 $(function () {
 
            //全不选
            $("#AllNotChk").click(function () {
                $("[name=chkbox_id]").removeAttr("checked");
            });
            //全选
            $("#AllChk").click(function () {
                $("[name=chkbox_id]").attr("checked", "checked");
            });
            //反选
            $("#FaiChk").click(function () {
                $("[name=chkbox_id]").each(function () {
                    this.checked = !this.checked;
                })
            });
 
        })
//实现方式二
  $(document).ready(function(){  
          
          $("#ckbAll").click(function(){  
                 $("input[name='fav']").attr("checked",true);  
          });  
             
          $("#ckbno").click(function(){  
              $("input[name='fav']").attr("checked",false);  
          });  
             
          $("#ckbrec").click(function(){  
             
              $("input[name='fav']").each(function(){  
                  // $(this).attr("checked",!$(this).attr("checked"));  
                this.checked=!this.checked;//用的是Dom的属性  
              });  
                 
          });  
       });

原生js实现checkbox全选、全不选、反选

// 全部选中
    function QuanXuan_Click() {
        var check = document.getElementsByTagName("input");
        for (var i = 0; i < check.length; i++) {
            if (check[i].type == "checkbox") {
                check[i].checked = true;
            }
        }
 
    }
 
    // 取消选中
    function QuXiao_Click() {
        var check = document.getElementsByTagName("input");
        for (var i = 0; i < check.length; i++) {
            if (check[i].type == "checkbox") {
                check[i].checked = false;
            }
        }
 
    }
 
    // 反选
    function slcNo_click() {
        var check = document.getElementsByTagName("input");
        for (var i = 0; i < check.length; i++) {
            if (check[i].type == "checkbox") {
                if (check[i].checked == false) {
                    check[i].checked = true;
                }
                else {
                    check[i].checked = false;
                }
 
            }
 
        }
    }
Tags:Jquery checkbox