练习-checkbox 全选 ，反选， 单选，以及取值

时间：2021-08-09 20:15:49

1.方法1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>全选与反选</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language=javascript>

function unselectall(){

if(document.myform.chkAll.checked){

document.myform.chkAll.checked = document.myform.chkAll.checked&0;

}

}

function CheckAll(form){

for (var i=0;i<form.elements.length;i++){

var e = form.elements[i];

if (e.Name != 'chkAll'&&e.disabled==false)

e.checked = form.chkAll.checked;

}

}

</script>

在网页中html中的代码:

<form name="myform" method="post" id="myform" action="" >

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='1'> 设计家园

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='2'> 网页教程

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='3'> 酷站欣赏

<input name='id' type='checkbox' onclick='unselectall()' id='id' value='4'> 网页素材

<input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'>

全选

</form>

</body>

</html>

2.方法2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>全选与反选</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language="javascript">

// --列头全选框被单击---

function ChkAllClick(sonName, cbAllId){

    var arrSon = document.getElementsByName(sonName);

 var cbAll = document.getElementById(cbAllId);

 var tempState=cbAll.checked;

 for(i=0;i<arrSon.length;i++) {

  if(arrSon[i].checked!=tempState)

           arrSon[i].click();

 }

}

// --子项复选框被单击---

function ChkSonClick(sonName, cbAllId) {

 var arrSon = document.getElementsByName(sonName);

 var cbAll = document.getElementById(cbAllId);

 for(var i=0; i<arrSon.length; i++) {

     if(!arrSon[i].checked) {

     cbAll.checked = false;

     return;

     }

 }

 cbAll.checked = true;

}

// --反选被单击---

function ChkOppClick(sonName){

 var arrSon = document.getElementsByName(sonName);

 for(i=0;i<arrSon.length;i++) {

  arrSon[i].click();

 }

}

</script>

</head>

<body>

<form name="form1" method="post" action="">

<table width="500" border="1">

  <tr bgcolor="#FFFF66">

    <td>

      <INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>

    <td align="center">复选框全选示例 </td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td>

    <td> 作用： </td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td>

    <td> a.单击列头复选框全选或全不选子项 </td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon3" type="checkbox"  value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td>

    <td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon4" type="checkbox"  value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td>

    <td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon5" type="checkbox"  value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon6" type="checkbox"  value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon7" type="checkbox"  value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon8" type="checkbox"  value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon9" type="checkbox"  value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td><INPUT name="chkSon" id="chkSon10" type="checkbox"  value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td>

    <td>d.将复选框反过来选</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr bgcolor="#66FFFF">

    <td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>

    <td align="center">反选示例</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

</form>

</body>

</html>

3.取值

var num=0;
var value=[];
var c=document.getElementsByTagName("INPUT");
for(var i=0;i<c.length;i++){
if(c[i].type=="checkbox"&&c[i].checked)
{
num++;
value[value.length]=c[i].value;
}
}

alert("共有"+num+"个复选框被选中,值为"+value);

相关文章