jQuery入门简单实现反选与全选

最新推荐文章于 2023-08-16 19:57:15 发布

转载最新推荐文章于 2023-08-16 19:57:15 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tandongcn/p/10681145.html

本文详细介绍了如何使用HTML和jQuery实现网页上的全选与反选功能，通过绑定事件处理函数，使得用户可以通过单个按钮操作来快速切换多个复选框的状态，包括全选、全不选及反选。

//html代码
<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路
       
              <input type="button" value="反选" id= 'agnSel'>
              
        <div id="wrap_input_box" >
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
                <input type="checkbox">全选与反选$<br>
          </div>

 
//  jquery代码
var oInput = $('#wrap_input_box>input[type=checkbox]')
        var btn = $("#all");
        btn.click(function(){
            if(this.checked){
               for(var i = 0 ; i<oInput.length;i++){
                oInput[i].checked = true;
               }
            }else{
                for(var i = 0 ; i<oInput.length;i++){
                    oInput[i].checked = false;
                }
            }
        })
         //  jquery绑定函数的方式  实际上就是给他包含的每一个dom对象都绑定了此事件
        oInput.click(function(){
            var flag = true;
            oInput.each(function(){
                //当前的是否没有被选中 如果每一个都选了 那么这个flag值 将会不会改变
                if(!this.checked){
                      flag = false;
                }
            });
             console.log(flag);
              if(flag){
                btn.attr('checked',true);
              }else{
                btn.attr('checked',false);
              }
        })
        
        //反选
        $('#agnSel').click(function(){
           
            for(i=0;i<oInput.length;i++){
                oInput[i].checked=  oInput[i].checked? false:true;    
            }
        })

转载于:https://www.cnblogs.com/tandongcn/p/10681145.html