jQuery达成checkbox全选作用一体化实例,得到全部入

作者: 网络应用  发布:2019-09-03

举了7个例外的checkbox状态,和大家逐条分享。

正文实例叙述了jQuery实现checkbox全选成效。共享给我们供大家参谋,具体如下:

1、全选

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>www.jb51.net jQuery实现checkBox全选</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  /*
  *统一设置所有条目的
  */
  function setItemCheckBox(flag) {
    $(":checkbox[name=checkboxBtn]").prop("checked",flag);
  }
  $(function () {
    //点击全选
    $("#selectAll").click(function(){
      //1.获取全选的状态
      var flag = this.checked;//获取全选的状态
      if(flag){
        $(this).prop("checked", true);
      }else{
        $(this).prop("checked", false);
      }
      //var flag = $(":checkbox[name=selectAll]").attr("checked");//jquery-1.5.1的用法
      //2.让所有条目的复选框与全选的状态同步
      //alert(flag);
      setItemCheckBox(flag);
    });
    //给所有复选框添加事件
    $(":checkbox[name=checkboxBtn]").click(function(){
      var flagV = this.checked;
      if(flagV){
        $(this).prop("checked", true);
      }else{
        $(this).prop("checked", false);
      }
      //获取所有复选框的个数
      var len = $(":checkbox[name=checkboxBtn]").length;
      //获取所有被选中的复选框的个数
      var checked_len = $(":checkbox[name=checkboxBtn]:checked").length;
      if(len == checked_len){
        //alert("全选中了");
        $("#selectAll").prop("checked",true);
      } else if(checked_len == 0) {
        $("#selectAll").prop("checked",false);
      } else {
        $("#selectAll").prop("checked",false);
      }
    });
  });
</script>
<body>
<div id="songList">
  <input type="checkbox" value="歌曲1" name="checkboxBtn"/>歌曲1<br />
  <input type="checkbox" value="歌曲2" name="checkboxBtn"/>歌曲2<br />
  <input type="checkbox" value="歌曲3" name="checkboxBtn"/>歌曲3<br />
</div>
<input type="checkbox" id="selectAll" name="selectAllBtn"/>全选<br />
</body>
</html>
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 

使用在线HTML/CSS/JavaScript代码运转为工人身份具:运营测量检验效果如下:

2、撤销全选(全不选)

图片 1

$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 

越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery表格(table)操作技巧汇总》、《jQuery页面成分操作技能汇总》、《jQuery常见事件用法与技艺总括》、《jQuery form操作技能汇总》、《jQuery常用插件及用法计算》、《jQuery扩充才具总计》及《jquery选取器用法计算》

3、选中全部奇数

瞩望本文所述对大家jQuery程序设计具有帮衬。

$("#btn3").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 

你大概感兴趣的文章:

  • jquery达成全选、反选、获得全数入选的checkbox
  • JQUEOdysseyY复选框CHECKBOX全选,撤销全选
  • jQuery CheckBox全选、全不选达成代码小结
  • jQuery剖断checkbox(复选框)是或不是被入选以及全选、反选完结代码
  • jquery复选框CHECKBOX全选、反选
  • 据他们说JQuery达成Check博克斯全选全不选
  • checkbox全选/撤消全选以及checkbox遍历jQuery达成代码
  • jquery中checkbox全选失效的消除方法
  • jQuery对checkbox 复选框的全选全不选反选的操作
  • 多个jquery.datatable共存,checkbox全选极度的全速化解措施

4、选中全部偶数

$("#btn6").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 

5、反选

$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 

或者

$("#invert").click(function(){
  $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
   $(o).attr("checked",!$(o).attr("checked"));
  });
 });

6、获取接纳项的值

var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 

7、遍历选中项

$("input[type=checkbox][checked]").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
}); 

上面实例呈报了jquery实现全选、反选、获得全数入选的checkbox。分享给我们供我们参考。具体如下:
运维效果截图如下:

图片 2

实际代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
<script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
//全选 
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全选 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//选中所有基数 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//选中所有偶数 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 
//反选 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或许选择项的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn6" value="选中所有偶数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</div> 
</form> 
</body> 
</html>

以上正是关于jquery中checkbox使用方法简便实例演示,希望对大家的求学抱有协助。

你可能感兴趣的篇章:

  • JQUE奥迪Q7Y复选框CHECKBOX全选,撤销全选
  • jQuery Check博克斯全选、全不选完成代码小结
  • jQuery推断checkbox(复选框)是否被入选以及全选、反选完结代码
  • jquery复选框CHECKBOX全选、反选
  • 基于JQuery实现CheckBox全选全不选
  • checkbox全选/撤除全选以及checkbox遍历jQuery达成代码
  • jquery中checkbox全选失效的消除方法
  • jQuery对checkbox 复选框的全选全不选反选的操作
  • 八个jquery.datatable共存,checkbox全选十分的高效化解办法
  • jQuery实现checkbox全选功效完全实例

本文由王中王开奖结果发布于网络应用,转载请注明出处:jQuery达成checkbox全选作用一体化实例,得到全部入

关键词: