JS实现HTML标签 checkbox全选及获取标签值

昨天需要用JS实现input标签的全选及获取标签的value值，通过在网上查阅实现了效果，下面直接演示：

1.html页面标签部分

<table cellspacing="0" border="0" style="border-collapse:collapse;" class="table table-striped">
   <tbody id='list'>
   <tr>
      <th style="width:60px;" scope="col">
         <input  type="checkbox"  id="chElt" οnclick="checkedAll()" value="" />
         <span id="mySpan">全选span>
      th>
      <th style="width:60px;" scope="col">序号th>
      <th style="width:120px;" scope="col">姓名th>
      <th style="width:80px;" scope="col">电话th>
      <th style="width:180px;" scope="col">账号余额th>
      <th style="width:90px;text-align:center">操作th>
   tr>
   php if(!empty($ordlist)){foreach($ordlist as $k=>$g){?>
   <tr >
      <td ><input name="checkbox_name" type="checkbox" value="''" class="che"/>td>
      <td>php echo $k+1; ?>td>
      <td>php echo $g['u_name'];?>td>
      <td>php echo $g['u_phone'];?>td>
      <td>php echo $g['u_money'];?>td>
      <td style="width:90px;text-align:center">
         <a href="">查看详情a>
      td>
   tr>
   php }}?>
   tbody>
table> 

2.JS部分代码

<script>



function checkedAll(){
    var chElt=document.getElementById("chElt");
    var checkedElt=chElt.checked;
    var allCheck=document.getElementsByName("checkbox_name");
    var mySpan=document.getElementById("mySpan");
    if(checkedElt){
        for(var i=0;i<allCheck.length;i++){
            allCheck[i].checked=true;
        }
        mySpan.innerHTML="取消";
    }else{
        for(var i=0;i<allCheck.length;i++){
            allCheck[i].checked=false;
        }
        mySpan.innerHTML="全选";
    }
}

//取得选中的checkbox的值
function getCheckboxValues(){
    
    var objs = document.getElementsByClassName("che");
    allValues='';
    for(var i =0;i<objs.length;i++){
        var obj = objs[i];
        if(objs[i].checked ){
            allValues+=obj.value+",";

        }
    }
  
    $("#val").attr("value",allValues);
    $("#val").val(allValues);
    $("#form1").submit();


}


script>