• input 选择 全选 反选 的js代码


    下面的这个代码是网络上的代码,做一个分析记录,原网址如下  http://www.jq22.com/jquery-info3836

    html:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jquery表格行全选反选</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
    <div class="container" style="margin-top:150px;">
      第一步,引入CSS
      <code><link rel="stylesheet" href="css/bootstrap.min.css"></code><br>
      第二步,引入JS
      <code>
        <script src="js/jquery-1.11.3.min.js"></script> <br>
        <script src="js/tableCheckbox.js"></script> <br>
      </code>
      第三步,调用tableCheck
      <code>$selecter.tableCheck()</code>
    <hr>
       例子:选中行class为“warning”
      <table class="table table-bordered table-striped" id="myTable">
        <thead>
        <th style="20px;"><input type="checkbox"></th>
          <th>编程语言</th>
            </thead>
        <tbody>
          <tr>
            <td><input type="checkbox"></td>
            <td>C</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Java</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>PHP</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>JavaScript</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>C++</td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Python</td>
          </tr>
        </tbody>
      </table>
      调用方法:<code>$("#myTable").tableCheck("warning");</code><br>
      <code>$selecter.tableCheck()</code>括号内为选中行的class,可自定义,example中使用的是Bootstrap,可用的class有 <code>waring</code>、<code>info</code>、<code>success</code>
      <script src="js/jquery-1.11.3.min.js"></script> 
      <script src="js/tableCheckbox.js"></script> 
      <script>
      $("#myTable").tableCheck("warning");
    </script> 
    </div>
    </body>
    </html>
    

    css:

    <link rel="stylesheet" href="css/bootstrap.min.css">

    js:

    (function($){
    	$.fn.tableCheck = function(allCheckboxClass){
    		var allCheck = $(this).find("th").find(':checkbox');
    		var checks = $(this).find('td').find(':checkbox');
    		var defaults = {
    			selectedRowClass:"active",
    		}
    		var settings = $.extend(defaults,allCheckboxClass);
    		if(allCheckboxClass)
    			settings.selectedRowClass = allCheckboxClass;
    		/*所有checkbox初始化*/
    		$(this).find(":checkbox").prop("checked",false);
    		/*全选/反选*/
    		allCheck.click(function(){
    			var set = $(this).parents('table').find('td').find(':checkbox');
    			if($(this).prop("checked")){
    				$.each(set,function(i,v){
    					$(v).prop("checked",true);
    					$(v).parents('tr').addClass(settings.selectedRowClass);
    				});
    			}else{
    				$.each(set,function(i,v){
    					$(v).prop("checked",false);
    					$(v).parents('tr').removeClass(settings.selectedRowClass);
    				});
    			}
    		});
    
    		/* 监听全选事件 */
    		checks.click(function(e){
    			e.stopPropagation();//阻止冒泡
    			var leng = $(this).parents("table").find('td').find(':checkbox:checked').length;
    			/*勾选后该行active*/
    			if($(this).prop('checked')){
    				$(this).parents('tr').addClass(settings.selectedRowClass);
    			}else{
    				$(this).parents('tr').removeClass(settings.selectedRowClass);
    			}
    			if(leng == checks.length){
    				allCheck.prop('checked',true);
    			}else{
    				allCheck.prop("checked",false);
    			}
    		});
    		/*点击table触发复选框*/
    		$(this).find("td").click(function(){
    			var _tr = $(this).parents('tr');
    			_tr.find(":checkbox").trigger("click");
    		});
    	}
    })(jQuery);
    

      

  • 相关阅读:
    61个下拉菜单实例
    简单图片放大效果
    QQ,MSN,Skype在线客服代码
    codesmith自定义模板之实体层
    如何利用缓存提高ASP.NET网站速度
    10+Jquery Tooltip Plugins and Tutorial Collection
    10个ajax 上传插件
    ASP.NET 中 “返回上一页”,“上一步”的实现方法
    执行多条SQL语句,事务处理
    [Asp.Net+C#]Datagrid使用技巧四(怎样控制在一个单元格中放置多个操作按钮及删除数据)
  • 原文地址:https://www.cnblogs.com/ghfjj/p/8079471.html
Copyright © 2020-2023  润新知