实例
<html>
<head>
</head>
<body>
<input name="id_all" id="id_all" onclick="quanxuan()" type="checkbox" value="" /><label>全选</label><br>
<input name="xuhao" id="a" type="checkbox">aaa<br>
<input name="xuhao" id="b" type="checkbox">bbb<br>
<input name="xuhao" id="c" type="checkbox">ccc<br>
<input name="xuhao" id="d" type="checkbox">ddd<br>
<input name="xuhao" id="e" type="checkbox">eee<br>
<input name="xuhao" id="f" type="checkbox">fff<br>
<input name="xuhao" id="g" type="checkbox">ggg<br>
<input name="xuhao" id="h" type="checkbox">hhh<br>
<input name="xuhao" id="i" type="checkbox">iii<br>
<input name="xuhao" id="j" type="checkbox">jjj<br>
<input type="button" value="弹出选中的id" onclick="show()">
</body>
<script>
//全选按钮，点一下全选，再点全取消
function quanxuan(){
if(document.getElementById('id_all').checked==true){
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (!inputs[i].checked == true){
inputs[i].checked = true;
}
}
}
}else{
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (inputs[i].checked == true){
inputs[i].checked = false;
}
}
}
}
}
//显示选中的id,在实际应用中常常需要动态获取被选中的id
function show(){
var id="";
var h=1;
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
//判断input是否为多选按钮
if(inputs[i].getAttribute('type')=='checkbox'){
// 因为第一个多选按钮是全选，所以跳过去
h=h+1;
if(h>2){
//判断多选按钮是否被选中
if (inputs[i].checked == true){
// 用jquey的话可以用下边注释的两行取id
//var input1 =$("input").eq(i);//取出相应的input
// var id1=input1.attr("id");//取出相应input的id
//没有jquery的话可以用下边的原生js
var id1=inputs[i].id;
//下边的两步是为了把id拼成一个字符串，当成json串配合java代码用的
id+=id1;
id+="|";
}
}
}
}
alert(id);
}
</script>
</html>
=========================================================================================
<html>
<head>
</head>
<body>
<input name="id_all" id="id_all" onclick="quanxuan()" type="checkbox" value="" /><label>全选</label><br>
<input name="xuhao" id="a" type="checkbox">aaa<br>
<input name="xuhao" id="b" type="checkbox">bbb<br>
<input name="xuhao" id="c" type="checkbox">ccc<br>
<input name="xuhao" id="d" type="checkbox">ddd<br>
<input name="xuhao" id="e" type="checkbox">eee<br>
<input name="xuhao" id="f" type="checkbox">fff<br>
<input name="xuhao" id="g" type="checkbox">ggg<br>
<input name="xuhao" id="h" type="checkbox">hhh<br>
<input name="xuhao" id="i" type="checkbox">iii<br>
<input name="xuhao" id="j" type="checkbox">jjj<br>
<input type="button" value="弹出选中的id" onclick="show()">
</body>
<script>
//全选按钮，点一下全选，再点全取消
function quanxuan(){
if(document.getElementById('id_all').checked==true){
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (!inputs[i].checked == true){
inputs[i].checked = true;
}
}
}
}else{
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].getAttribute('type')=='checkbox'){
if (inputs[i].checked == true){
inputs[i].checked = false;
}
}
}
}
}
//显示选中的id,在实际应用中常常需要动态获取被选中的id
function show(){
var id="";
var h=1;
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
//判断input是否为多选按钮
if(inputs[i].getAttribute('type')=='checkbox'){
// 因为第一个多选按钮是全选，所以跳过去
h=h+1;
if(h>2){
//判断多选按钮是否被选中
if (inputs[i].checked == true){
// 用jquey的话可以用下边注释的两行取id
//var input1 =$("input").eq(i);//取出相应的input
// var id1=input1.attr("id");//取出相应input的id
//没有jquery的话可以用下边的原生js
var id1=inputs[i].id;
//下边的两步是为了把id拼成一个字符串，当成json串配合java代码用的
id+=id1;
id+="|";
}
}
}
}
alert(id);
}
</script>
</html>