js中，checkBox中复选框实现批处理操作

(1)首先，在复选框中选择要操作的对象，效果图如下所示：

（2）html中，代码如下：

 <table class="table table-striped table-bordered" id="dataTables" style="white-space: nowrap;width: 100%;">
      <thead>
          <tr style="background: #d9d6c3;">
              <th><input type="checkbox" id="checkAll" /></th>
              <th>文件名</th>
              <th style="width: 95px;">文件大小</th>
              <th style="width: 165px;">文件上传时间</th>
          </tr>
      </thead>
      <tbody>
          <tr>
             <td><input type="checkbox" name="ck" id="ckc"/>
　　　　　　　　　　<input type="hidden" value="'+docId+'" id="documentId"/>
　　　　　　　 </td>
             <td>Torasemide ...</td>
             <td>180 kb</td>
             <td>2016-11-28</td>
          </tr>
          .........
        </tbody>
</table>

(3)js中，实现复选框的全选操作

$("#checkAll").bind("click", function () {
        if($(this).attr("checked") == 'checked'){
            $("[name = 'ck']:checkbox").attr("checked", true);
        } else {
            $("[name = 'ck']:checkbox").attr("checked", false);
        }
    });

（4）全选后的状态，效果图如下： js中，checkBox中复选框实现批处理操作

(5)对于全选状态，对选择的复选框进行操作,js中进行的操作如下：

说明：其中substring对字符串进行截取操作，lastIndexOf(',')是对字符串最后一个','位置

function openWay(obj){
    var trs = $("#dataTables tr");
    var param1="";
    var param2="";
    //alert("=========");
    for(var i=0;i<trs.length;i++){　　　　　　　　　　　　　　　　//对每一个选中的复选框进行操作(更为简单的实现方式：见下面)
        var obs = $(trs[i]).find("#ckc").attr("checked");
        if(obs == 'checked'){
        　　var documentId = $(trs[i]).find("#documentId").val();　　//获取复选框中的值(更为简单的实现方式：见下面)
        　　if(documentId!=''){ 
                param1+=documentId+"↔↓×↔";
            }else{
                param2+=documentId+"↔↓×↔";
            }
        }
    }
    
    if(param1.length<=0 && param2.length<=0){
        alert({msg:"请先选择文件！"});
        return null;
    }
    if(param1.length>0){
        param1=param1.substring(0,param1.lastIndexOf("↔↓×↔"));
    }
    if(param2.length>0){
        param2=param2.substring(0,param2.lastIndexOf("↔↓×↔"));
    }
    //此处可以操作其他内容，也可以进行数据库操作    
}

其他方式：实现多选框的选择

$("[name='checkbox']").each(function(){//反选
　　if($(this).attr("checked") ){
　　　　$(this).attr("checked",false);
　　}
});

获取复选框中选中值：

var c = "";
$('input[name="op"]:checked').each(function() {
　　c += $(this).val() + ",";         //this指当前点击的对象
});

js中，checkBox中复选框实现批处理操作

相关推荐