jquery 页面全选框实践代码

复制代码 代码如下:

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>全选</title>

  </head>

  <body>

  <div>demo

  <input type="button" onclick="alert(ob.checkedIds());" value="选中ID"/>

  <input type="button" onclick="alert(ob.checkedTexts());" value="选中值"/>

  <input type="button" onclick="alert(ob.checkedKeys('value1'));" value="选中属性值"/>

  </div>

  <table class="infor">

  <tr>

  <th><input name="allcheck" id="allcheck1" type="checkbox" value="1"/>

  全选</th>

  </tr><tr>

  <td><input name="record" type="checkbox" value="1" value1="11"/>去

  </td></tr><tr>

  <td><input name="record" type="checkbox" value="2" value1="22"/>啊

  </td></tr><tr>

  <td><input name="record" type="checkbox" value="3" value1="33"/>我

  </td></tr><tr>

  <td><input name="record" type="checkbox" value="4" value1="44"/>饿

  </td></tr>

  </table>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script type="text/javascript" >

  //http://www.cnblogs.com/libsource

  (function($){

  $.allcheck=function(options){

  _defaults = {

  allcheckid:"allcheck",

  checkboxname:'record'

  };

  o = $.extend(_defaults,options);

  _allck=$("#"+o.allcheckid);

  _tbl=_allck.parents("table");

  //返回所有选中checkbox的id集合

  checkedIds=function () {

  var ids = "";

  $("input[name=" + o.checkboxname + "]").each(function() {

  if ($(this).attr("checked"))

  ids += $(this).val() + ",";

  });

  return ids.replace(/,$/,'');

  }

  //返回所有选中checkbox的key属性集合

  checkedKeys=function (key) {

  var ids = "";

  $("input[name=" + o.checkboxname + "]").each(function() {

  if ($(this).attr("checked"))

  ids += $(this).attr(key) + ",";

  });

  return ids.replace(/,$/,'');

  }

  //返回所有选中checkbox的文本集合

  checkedTexts=function () {

  var txts = "";

  $("input[name=" + o.checkboxname + "]").each(function() {

  if ($(this).attr("checked"))

  txts += gtrim($(this).parent().text()) + ",";

  });

  return txts.replace(/,$/,'');

  }

  gtrim=function (txt) {

  return txt.replace(/(^\s*)|(\s*$)/g, "");

  }

  //设置所有选中checkbox的id集合

  setCheckedIds=function (checkids) {

  checkids = ","+checkids+",";

  $("input[name=" + o.checkboxname + "]").each(function() {

  if (checkids.match(","+$(this).val()+","))

  $(this).attr("checked","checked");

  });

  }

  //检查所有checkbox是否全选

  _checkAll=function () {

  if (this.checked && $("input:checkbox:not([checked]):not(#" + o.allcheckid + ")", _tbl).length == 0)

  _allck[0].checked = true;

  else

  _allck[0].checked = false;

  }

  //全选checkbox状态

  _setAllChecked=function () {

  if (!this.checked)

  $("input:checkbox", _tbl).removeAttr("checked");

  else

  $("input:checkbox", _tbl).not(this).attr("checked", "checked");

  }

  _allck.click(_setAllChecked);

  $("input:checkbox[name="+o.checkboxname+"]").each(function(){$(this).click(_checkAll);});

  return {checkedIds:checkedIds,checkedKeys:checkedKeys,checkedTexts:checkedTexts,setCheckedIds:setCheckedIds};

  };

  })(jQuery);

  </script>

  <script type="text/javascript">

  var ob=$.allcheck({allcheckid:'allcheck1'});

  //设置选项allcheckid checkboxname

  //取返回值可以调用checkedIds,checkedKeys,checkedTexts

  </script>

  </body>

  </html>