昨天需要用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>