通过js实现将所当页的checkbox全选并且获取其value值

最新推荐文章于 2024-04-01 19:33:10 发布

bzuld

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量4.6k

点赞数

分类专栏： js---随记

本文链接：https://blog.youkuaiyun.com/bzuld/article/details/8161021

版权

js---随记专栏收录该内容

20 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript">  
  
//将所有的checkbox全部选中
function checkedAll(){   
	var objs = document.getElementsByTagName("input");  
    for(var i =0;i<objs.length;i++){  
	   var obj = objs[i];  
	   if(obj.type=="checkbox"){  
	    if(i!=0){
			if(obj.checked){ 
				obj.checked=false;
			}else{
				obj.checked=true;
			}  
		}
	   }  
	}  
}  
 
//取得选中的checkbox的值
function getCheckboxValues(){   
    var objs = document.getElementsByTagName("input");  
    allValues='';    
	for(var i =0;i<objs.length;i++){  
		var obj = objs[i];  
		if(obj.type=="checkbox"){
			allValues+=obj.value+",";   
		}
	   }  
	alert(allValues);
}</script> 
</head>

<body>
<table id="DataList1">
 <tr>
  <th><input type="checkbox" οnclick="checkedAll()" value="000"/></th><th>名称</th>
 </tr>
 <tr>
  <td><input name="checkbox_name" type="checkbox" value="1"/></td>
  <td>张三</td>
 </tr>
 <tr>
  <td><input name="checkbox_name" type="checkbox" value="2"/></td>
  <td>李四</td>
 </tr>
 <tr>
  <td>
  <input type="button"  value="操作" οnclick="getCheckboxValues()"/>
  </td>
  </tr>
</table>
</body>
</html>