數據列表的全選、反選以及批量操做

數據列表的全選、反選以及批量操做

html部分代碼：
一、全選的checkbox： <input type="checkbox" value="" id="all_columnId">
二、每條數據前邊的checkbox:<input type="checkbox" name="columnId" class="chrId" value="<% $Item.Id %>">

js代碼部分：
全選與反選：
$("#all_columnId").on("click", function(){
if (this.checked) {
$("[name=columnId]:checkbox").prop("checked", this.checked);
//有模板才顯示刪除按鈕
var check_value = [];
\((&quot;input[name='columnId']:checked&quot;).each(function(){ check_value.push(\)(this).val());
});
console.log(check_value);
check_value = $.grep(check_value, function(n){
return $.trim(n).length > 0;
});
if(check_value.length > 0){
$("#batch_del_fields").show();
}
}else{
$("[name=columnId]:checkbox").prop("checked", this.checked);
$("#batch_del_fields").hide();
}
});
$(".table").on("click","input[name='columnId']",function(){
var check_value = [];
\((&quot;input[name='columnId']:checked&quot;).each(function(){ check_value.push(\)(this).val());
});
console.log(check_value);
check_value = $.grep(check_value, function(n){
return $.trim(n).length > 0;
});
var $columnId = $("input[name='columnId']");
if(check_value.length > 0){
$('#batch_del_fields').show();
}else{
$('#batch_del_fields').hide();
}
\((&quot;#all_columnId&quot;).prop(&quot;checked&quot;,\)columnId.length == $columnId.filter(":checked").length ? true : false);
});

操做部分：通常是批量刪除、批量審覈等
$("#batch_del_fields").click(function(){
//獲取選中的
var check_value = [];
\((&quot;input[name='columnId']:checked&quot;).each(function(){ check_value.push(\)(this).val());
});
//check_value就是選中的部分，數組形式
console.log(check_value);
//在這下邊執行異步刪除等操做
});