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="'<?php echo  $g['payid']; ?>'" 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="<?php echo U('/Commen/allinfo/userinfo/'.$g['id']);?>">查看详情</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>