奥门威尼斯网址jQuery实现checkbox全选功能完整实例

by admin on 2019年9月3日

复制代码 代码如下:

checkbox复选框全选和取消全选实例代码,checkbox全选

checkbox复选框全选和取消全选实例代码:
关于复选框的全选和不全选是非常常见的操作,本章节分享一段代码实例,能够实现多种选中和取消选中功能。
代码实例如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$("document").ready(function(){
  $("#all").click(function(){   
    if(this.checked)
    {   
      $("input[name='checkbox']").each(function(){this.checked=true;});
      $("#btn1").attr("value","反选");   
    }
    else
    {   
      $("input[name='checkbox']").each(function(){this.checked=false;});   
      $("#btn1").attr("value","全选"); 
    }   
  }); 

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

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

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

  $("#fanxuan").click(function(){
    $("[name='checkbox']").each(function(){
      if($(this).attr("checked"))
      {
        $(this).removeAttr("checked");
      }
      else
      {
        $(this).attr("checked",'true');
      }
    })
  })
  $("#get").click(function(){
    var str="";
    $("[name='checkbox'][checked]").each(function(){
      str+=$(this).val()+"/r/n";
    })
    alert(str);
  })
})
 </script>
 </head>
 <body>
 <form name="form1" method="post" action="">
   <input type="checkbox" id="all" name="all">
   <input type="button" id="btn1" value="全选">
   <input type="button" id="cancel" value="取消全选">
   <input type="button" id="jishu" value="选中所有奇数">
   <input type="button" id="fanxuan" value="反选">
   <input type="button" id="get" value="获得选中的所有值">
   <br>
   <input type="checkbox" name="checkbox" value="蚂蚁部落一">
   蚂蚁部落一
   <input type="checkbox" name="checkbox" value="蚂蚁部落二">
   蚂蚁部落二
   <input type="checkbox" name="checkbox" value="蚂蚁部落三">
   蚂蚁部落三
   <input type="checkbox" name="checkbox" value="蚂蚁部落四">
   蚂蚁部落四
   <input type="checkbox" name="checkbox" value="蚂蚁部落五">
   蚂蚁部落五
   <input type="checkbox" name="checkbox" value="蚂蚁部落六">
   蚂蚁部落六
   <input type="checkbox" name="checkbox" value="蚂蚁部落七">
   蚂蚁部落七
   <input type="checkbox" name="checkbox" value="蚂蚁部落八">
   蚂蚁部落八
 </form>
</body>
</html>

 

原文地址是:

更多内容可以参阅:

 

奥门威尼斯网址
checkbox复选框全选和取消全选实例代码:
关于复选框的全选和不全选是非常常见的操作,…

本文实例讲述了jQuery实现checkbox全选功能。分享给大家供大家参考,具体如下:

jQuery(".salaryIds").each(function(){
    if(jQuery("#salaryIds").attr("checked")=="checked"){
        jQuery(".salaryIds").attr("checked","checked");
    }else{
        jQuery(".salaryIds").removeAttr("checked");
    }
    console.log(jQuery(this).attr("checked"));
}); 

// 主复选框
<input type=”checkbox” id=”ck” name=”ckAll”>// 子复选框项
<input type=”checkbox” id=”ck1″ name=”ckItm”>
<input type=”checkbox” id=”ck2″ name=”ckItm”>
<input type=”checkbox” id=”ck3″ name=”ckItm”>

<!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>

 

复制代码 代码如下:

使用在线HTML/CSS/JavaScript代码运行工具:运行测试效果如下:

var $ckAll = $(“input[name=’ckAll’]”);
var $ckItm = $(“input[name=’ckItm’]”);
var len = $ckItm.length;
$ckAll.click(function() {
  //
获取$ckAll当前选中状态,如果选中,其他子复选框则选中,反之则取消
    $ckItm.prop(‘checked’,this.checked);
});
$ckItm.click(function() {
    // 给b绑定判断事件
    var b=$ckItm.filter(“:checked”).length==len;//
当所选的子复选框个数等于总个数,主复选框则会被选中
    // 通过三元运算判断
    var flag=$ckAll.prop(“checked”,b?true:false);
});

奥门威尼斯网址 1

代码如下: // 主复选框 input
type=”checkbox” id=”ck” name=”ckAll”// 子复选框项 input type=”checkbox”
id=”ck1″ name=”ckItm” input type=”checkbox” id=”ck2″ n…

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery
form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jquery实现全选、反选、获得所有选中的checkbox
  • JQUERY复选框CHECKBOX全选,取消全选
  • jQuery
    CheckBox全选、全不选实现代码小结
  • jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
  • jquery复选框CHECKBOX全选、反选
  • 基于JQuery实现CheckBox全选全不选
  • checkbox全选/取消全选以及checkbox遍历jQuery实现代码
  • jquery中checkbox全选失效的解决方法
  • jQuery对checkbox
    复选框的全选全不选反选的操作
  • 多个jquery.datatable共存,checkbox全选异常的快速解决方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图