[原创]多选/全选checkbox，AJAX提交。另附IE的onchange BUG

March 6, 2010 by SLJ | Category:Design, HTML/CSS, Javascript, MySQL, PHP, Projects | No Comment Font size: AA AA

最近在为MeePlace 2.7的后台编写多选功能。在一个接一个的版本中，MeePlace的后台是越来越强大了（不够谦虚，hoho），后台采用纯ajax异步（有的时候觉得编程会有点麻烦，但是从1.0开始就是这样的后台，现在要改的话也麻烦，况且AJAX能给用户带来更好的体验，就继续开发吧：D）

这次后台增加的功能中，有一个是能够多选/全选项目，这个已经是历史遗留问题了，在我所有开发的项目中都是用这套自己开发的后台系统，改一改就成。这次布莱恩吧multi-selectable列在了Milestone里，所以就写了。以前有做过多选，不过由于是原始form的post，所以比较简单。这次用AJAX的后台多选操作，我还是想了一下才开始动手的。

我的想法是，通过遍历checkbox，来得到有被选定了的checkbox的value，然后再传给后端进行多选处理。

下面公开MeePlace的这部分代码。

全选按钮。用户点击全选的那个checkbox后，checkbox的onclick=”select_item_all(this,”allitem”,”childitem”)”
其中”allitem”是全选的checkbox的classname，因为也许这个全选会出现两个，或者更多，比如表头和表尾各一。
“childitem”是所有的条目前的checkbox的classname。
JS代码：

//全选按钮
function select_item_all(whochecked,allitem,childitem)
{
 if(whochecked==true)
 {
  $('.'+allitem).attr('checked',true);
  $('.'+childitem).attr('checked',true);
  $('.itemtr').addClass('trselected');
 }
 else
 {
  $('.'+allitem).attr('checked',false);
  $('.'+childitem).attr('checked',false);
  $('.itemtr').removeClass('trselected');
 }
}

这样通过判断提交全选的checkbox是否被勾选，来达到全选目的。

下面的代码是点击”Delete selected”（“删除所选”）之后，扫描所选中的checkbox的value以及发出警告和异步提交的代码
JS代码：

function delselected(sheet,where,childitem)
{
//通过扫描制定childitem（项目前的checkbox的classname），来获取选中了的项目IDs
   var selected_ids='';
   var obj=$("input:checked[class='"+childitem+"']");
    $.each(obj, function(i,item){
       selected_ids+= $(item).val() +',';
     });  

if(selected_ids)
{
 var a=confirm("CAUTION! You are going to delete a quantity of items.\n\rThese items will never be restored after deleted.\n\rSure to delete these items?");
if(a==0) return ;
}
else   //没有发现选中的checkbox
{
 alert('You have not selected any item.');
 return;
}

 //通过jQuery的$.post来异步提交数据
$.post("/mgt/func/delete.php?"+Math.random(), {
sheet:sheet,
where:where,
equal:selected_ids
},function(data){tips('Items deleted.');nav();});

}

对应 delete.php的代码，虽然代码不安全，能够直接注入的样子，直接操作数据库。但是出于是后台的代码，而且MeePlace对SESSION的检验非常严格，所以就这么用了，我想没有一个Admin想用自己的Admin权限黑自己的网站的。LOL
PHP代码：

//检查_SESSION

//自己的数据库连接，或者是框架的数据库接口

///传递过来的值，equals是所选ID经过explode()函数之后得出的数组
$sheet=$_REQUEST[sheet]; //
$where=$_REQUEST[where]; //
$equal=$_REQUEST[equal]; //

$equals = explode(“,”, $equal);
/// 循环删除数据库中的制定条目
$i=0;
while($i if($equals[$i]){
$query="delete from `$sheet` where `$where`= '$equals[$i]' limit 1";
$rc=mysql_query("$query") or die("ERROR: $query");
$output.=$query."\n\r";
}
$i++;
}

SLJ.me