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

佚名 6年前 (2019-04-10) 随笔 1158人围观抢沙发百度已收录

//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;    
            }
        })