>

jquery达成轻便的全选和反选效用,jquery落成全选

- 编辑:乐百家599手机首页 -

jquery达成轻便的全选和反选效用,jquery落成全选

js:思路:1.点击全选按键达成,上边内容全选,与反选 2.下边有二个从未入选时,全选开关不勾选,当一切中选时才全选。这里引进一个计数器,来推断是还是不是全部入选。

<ul id="list"> 
 <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
 <li><label><input type="checkbox" value="2"> 2.哈哈,真的太天真了</label></li> 
 <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗?</label></li> 
 <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
 <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
 <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll"> 
<input type="button" value="全不选" class="btn" id="unSelect"> 
<input type="button" value="反选" class="btn" id="reverse"> 
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

jquery达成轻松的全选和反选功效,jquery达成全选

首先我们看个简单的实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://www.oudabj.com/uploads/allimg/190619/23542L493-0.jpg" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
      });
    });
  </script>

</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

上边再给大家享受一段基于jQuery完结checkbox列表全选、反选和不选功力的代码,适用于网页多选后须要开始展览批量操作的现象(如批量剔除等)。文章结合实例,代码简洁,基本覆盖选项选拔操作的凡事,希望得以帮到有亟待的前端开辟爱好者。

引入jquery库

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

构建HTML

诚如从数据库读出来的列表都必要批量入选以便除去与编辑等,上边大家就来模拟下,完结复选框checkbox的全选与不选,先创制html

<ul id="list">  
  <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
  <li><label><input type="checkbox" value="2"> 2.哈哈,真的太天真了</label></li> 
  <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗?</label></li> 
  <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
  <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
  <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">  
<input type="button" value="全不选" class="btn" id="unSelect">  
<input type="button" value="反选" class="btn" id="reverse">  
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

jQuery 代码

1、全选或全不选。当勾选全选开关#selectAll旁边的复选框#all时,列表中的选项全部中选,反之撤除勾选则列表中的选项全体为未当选状态。

$("#all").click(function(){  
  if(this.checked){  
    $("#list :checkbox").attr("checked", true);  
  }else{  
    $("#list :checkbox").attr("checked", false); 
  }  
});

2、全选。当点击全选按键#selectAll或许勾选全选开关旁边的复选框#all时,列表中存有的选项都会被选中,包涵全选旁边的复选框也是选中状态。

$("#selectAll").click(function () { 
  $("#list :checkbox,#all").attr("checked", true);  
});

3、全不选。当点击全不选按键#unSelect时,列表中负有的选项都是未入选状态,当然包括#all也是未入选状态。

$("#unSelect").click(function () {  
  $("#list :checkbox,#all").attr("checked", false);  
});

4、反选。当点击反选按键#reverse,列表中兼有被选中的选项改成未入选状态,而有所未选中的选项改成已入选状态,当然也要留意#all的状态。

$("#reverse").click(function () { 
  $("#list :checkbox").each(function () {  
    $(this).attr("checked", !$(this).attr("checked"));  
  }); 
  allchk(); 
});

代码中遍历了增选列表,然后改成checked属性,最终调用函数allchk(),后边将介绍该函数。

5、获得选中的有着值。大家要跟后台程序交互就务须获得列表中所选项的值,大家透过遍历数组,将当选项的值存放在数组中,最终结合由逗号(,)隔离的字符串,开荒者就足以经过获得那个字符串实行相应的操作了。

$("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
    valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(',');//转换为逗号隔开的字符串 
  alert(vals); 
});

为了完美选中选项作用,我们在单击列表中有些选项时,假诺勾选的项刚好满意全部当选的规格,则#all也要对应的成为选中状态,同样,假如事先全部的选项是选中状态时,当打消勾选有个别选项时,那么#all也要相应的成为未当选状态。

//设置全选复选框 
$("#list :checkbox").click(function(){ 
  allchk(); 
});

函数allchk()就是用来检查评定全选框#all应该是选中状态照旧未入选状态的,请看代码。

function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk  ; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

总结

jQuery操作复选框的当选和不选中状态特别轻便,使用attr()来安装"checked"属性的值,true未选中,false为未选中,在整整全选、反选进程中注意管理全选复选框的入选状态,以及获得选中选项的值。以下笔者将拥有jQuery代码整理在共同,供大家参谋。

$(function () { 
  //全选或全不选 
  $("#all").click(function(){  
    if(this.checked){  
      $("#list :checkbox").attr("checked", true);  
    }else{  
      $("#list :checkbox").attr("checked", false); 
    }  
   }); 
  //全选  
  $("#selectAll").click(function () { 
     $("#list :checkbox,#all").attr("checked", true);  
  });  
  //全不选 
  $("#unSelect").click(function () {  
     $("#list :checkbox,#all").attr("checked", false);  
  });  
  //反选 
  $("#reverse").click(function () { 
     $("#list :checkbox").each(function () {  
       $(this).attr("checked", !$(this).attr("checked"));  
     }); 
     allchk(); 
  }); 

  //设置全选复选框 
  $("#list :checkbox").click(function(){ 
    allchk(); 
  }); 

  //获取选中选项的值 
  $("#getValue").click(function(){ 
    var valArr = new Array; 
    $("#list :checkbox[checked]").each(function(i){ 
      valArr[i] = $(this).val(); 
    }); 
    var vals = valArr.join(','); 
     alert(vals); 
  }); 
}); 
function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk  ; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

但愿本文所述对大家的jQuery程序设计具有帮忙。

以上正是本文的整体内容,希望本文的剧情对大家的求学可能干活能带动一定的支持,同一时候也希望多多扶助脚本之家!

$("#selectAll").click(function () { 
 $("#list :checkbox,#all").attr("checked", true); 
});

您大概感兴趣的篇章:

  • jquery复选框CHECKBOX全选、反选
  • JQUE帕杰罗Y CHECKBOX全选,撤除全选,反选方法三
  • jquery 完成的全选和反选
  • jquery input checked全选与反选1.3.2的版本
  • Jquery Check博克斯全选方法代码附js checkbox全选反选代码
  • jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
  • jQuery推断checkbox(复选框)是还是不是被选中以及全选、反选达成代码
  • jQuery达成复选框全选/撤除全选/反选及获得采纳的值
  • Jquery全选与反选点击推行一遍的消除方案

首先大家看个简单的实例 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...

通过checkbox 进行全选和打消全选的操作,假设经过toggle举办拍卖,则会产出checkbox不可能出示对勾的难点。

jq,使用jQuery 前先引进 jq:

//设置全选复选框 
$("#list :checkbox").click(function(){ 
 allchk(); 
});

里头,上面包车型地铁each()方法用于当页面其它的checkbox有未当选状态,则全选状态撤销。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 全选<input type="checkbox" name="allchoose" id="box" onclick="chk()"/>
 <div id="lower">
  苹果<input type="checkbox" name="apple" id="apple"/>
  香蕉<input type="checkbox" name= "banner" id="banner" />
  橘子<input type="checkbox" name="origin" id="origin"/>
 </div>
 <script type="text/javascript">
  var box = document.getElementById("box");
  var lb = document.getElementById("lower");
  var lber = lb.getElementsByTagName("input");
 //全选,反选
 box.onclick = function(){
  if(this.checked){
  for(var i=0;i<lber.length;i  ){
   lber[i].checked = true;
  }
  }else{
  for(var i=0;i<lber.length;i  ){
   lber[i].checked = false;
  }
  }
 }
 //下面全选后,全选框才勾上
 for(var i=0;i<lber.length;i  ){
  lber[i].onclick = function(){
  //引入计数器sum
  var sum = 0;
  for(var j=0;j<lber.length;j  ){
   if(lber[j].checked){
   sum  = 1;
   if(sum == lber.length){
    box.checked = true;
   } else {
    box.checked = false;
   }
   }
  }
  }
 }
 </script>
 </body>
</html>
function allchk(){ 
 var chknum = $("#list :checkbox").size();//选项总个数 
 var chk = 0; 
 $("#list :checkbox").each(function () { 
  if($(this).attr("checked")==true){ 
   chk  ; 
  } 
 }); 
 if(chknum==chk){//全选 
  $("#all").attr("checked",true); 
 }else{//不全选 
  $("#all").attr("checked",false); 
 } 
}
$("#chkRreviewOffline").click(function(){ 
  if(this.checked){ 
    $('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){ 
      this.checked=true; 
    }); 
  }else{ 
    $('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){ 
      this.checked=false; 
    }); 
  } 
}); 
$('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){ 
  $(this).click(function(){ 
    if(this.checked){ 
      //console.log('checked'); 
    }else{ 
      //console.log('not checked'); 
      $("#chkRreviewOffline").get(0).checked=false; 
    } 
  }); 
});

js ,jq达成全选、反选作用:

函数allchk()便是用来检查评定全选框#all应该是选中状态依然未当选状态的,请看代码。

示例:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <input type="checkbox" value="全选" id="ckAll"/>水果</br>
 <div class="box">
  <input type="checkbox" value="苹果" id="apple"/>苹果
  <input type="checkbox" value="香蕉" id="bann"/>香蕉
  <input type="checkbox" value="橘子" id="origin"/>橘子
 </div> 
 <script src="js/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
       //给所有 .box input 元素添加 checked = ckAll 当前的状态;
       //prop('checked',value) ,第一个值获取属性,第二个值:设置属性值。prop只有一个参数时,表示获取元素属性。
        $('#ckAll').click(function(){
           $('.box input').prop('checked',$(this).prop('checked'));
  });
  $('.box input').click(function(){
  //each 便利每一个元素,让其执行该函数
  $('.box input').each(function(){
   if(!$(this).prop('checked')){
   $('#ckAll').prop('checked',false);
   //有一个不满足就 跳出该循环,避免执行下面
   return false;
   }else{
   $('#ckAll').prop('checked',true);
   }
  })
  })</script>
 </body>
</html>

总结

您也许感兴趣的稿子:

  • jQuery完结CheckBox全选、全不选效能
  • jQuery Checkbox 全选 反选的简便实例
  • jQuery完成checkbox列表的全选、反选功用
  • 根据jQuery的checkbox全选难点浅析
  • jQuery对checkbox 复选框的全选全不选反选的操作
  • JQuery选中checkbox方法代码实例(全选、反选、全不选)
  • Jquery 完毕checkbox全选方法
  • jquery中checkbox全选失效的缓和措施
  • jquery操作checkbox达成全选和撤废全选
  • 乐百家前段 ,jquery、js操作checkbox全选反选
  • jq checkbox 的全选并ajax传参的实例

你也许感兴趣的小说:

  • 基于JavaScript实现全选、不选和反选效果
  • jQuery实现复选框的全选和反选
  • JQuery达成列表中复选框全选反选功效封装(推荐)
  • jquery完成全选、不选、反选的三种艺术
  • js达成checkbox全选和反选示例
  • asp.net GridView控件中模板列CheckBox全选、反选、撤除
  • jQuery判别checkbox(复选框)是或不是被入选以及全选、反选完成代码
  • jquery复选框CHECKBOX全选、反选
  • jquery完成全选、反选、得到全数入选的checkbox
  • Android checkbox的listView(多选,全选,反选)具体达成格局

jQuery操作复选框的当选和不选中状态特别简单,使用attr()来安装"checked"属性的值,true未选中,false为未选中,在任何全选、反选进度中注意处理全选复选框的入选状态,以及获得选中选项的值。以下笔者将持有jQuery代码整理在协同,供大家参照他事他说加以考察。

行使click事件,依照checked属性举行判断就可以。

本文由乐百家前段发布,转载请注明来源:jquery达成轻便的全选和反选效用,jquery落成全选