当前位置: 代码迷 >> Web前端 >> 兑现复选框的全选和反选
  详细解决方案

兑现复选框的全选和反选

热度:25   发布时间:2012-08-29 08:40:14.0
实现复选框的全选和反选

实现复选框的全选和反选



?<!--[endif]-->

//实现全选功能

function CheckAll(elements) {

????????????? for (i = 0; i < elements.length; i++) { //通过for循环将全部复选框设置为选中状态

???????????????????? elements[i].checked = true; //设置当前复选框为选中状态

????????????? }

?????? }

?????? //实现反选功能

?????? function CheckInverse(elements) {

????????????? for (i = 0; i < elements.length; i++) { //通过for循环将遍历全部复选框

???????????????????? if (elements[i].checked == true) { //判断当前复选框是否为选中状态

??????????????????????????? elements[i].checked = false; //设置当前复选框为非选中状态

???????????????????? } else {

??????????????????????????? elements[i].checked = true; //设置当前复选框为选中状态

???????????????????? }

????????????? }

?????? }

?

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

???????????????????? <table width="300" border="1" cellspacing="0" cellpadding="0"

??????????????????????????? bordercolor="#000000" bordercolordark="#666666"

??????????????????????????? bordercolorlight="#FFFFFF">

??????????????????????????? <tr>

?????????????????????????????????? <td width="44" height="25" align="center">

????????????????????????????????????????? <input name="delId" type="checkbox" id="delId" value="1">

?????????????????????????????????? </td>

?????????????????????????????????? <td width="109">

?????????????????????????????????? ?????? &nbsp;明日科技

?????????????????????????????????? </td>

?????????????????????????????????? <td width="147">

????????????????????????????????????????? &nbsp;超级管理员

?????????????????????????????????? </td>

??????????????????????????? </tr>

??????????????????????????? <tr>

?????????????????????????????????? <td height="25" align="center">

????????????????????????????????????????? <input name="delId" type="checkbox" id="delId" value="2">

?????????????????????????????????? </td>

?????????????????????????????????? <td>

????????????????????????????????????????? &nbsp;柠檬草

?????????????????????????????????? </td>

?????????????????????????????????? <td>

??????????????????????????? ????????????? &nbsp;普通管理员

?????????????????????????????????? </td>

??????????????????????????? </tr>

??????????????????????????? <tr>

?????????????????????????????????? <td height="25" align="center">

????????????????????????????????????????? <input name="delId" type="checkbox" id="delId" value="3">

?????????????????????????????????? </td>

?????????????????????????????????? <td>

????????????????????????????????????????? &nbsp;gk

?????????????????????????????????? </td>

?????????????????????????????????? <td>

????????????????????????????????????????? &nbsp;普通会员

?????????????????????????????????? </td>

??????????????????????????? </tr>

??????????????????????????? <tr>

?????????????????????????????????? <td height="25" align="center">

????????????????????????????????????????? <input name="delId" type="checkbox" id="delId" value="4">

?????????????????????????????????? </td>

?????????????????????????????????? <td>

????????????????????????????????????????? &nbsp;sk

?????????????????????????????????? </td>

?????????????????????????????????? <td>

????????????????????????????????????????? &nbsp;普通会员

?????????????????????????????????? </td>

??????????????????????????? </tr>

???????????????????? </table>

???????????????????? <table width="300" border="0" cellspacing="0" cellpadding="0">

??????????????????????????? <tr>

?????????????????????????????????? <td width="100%" height="30" align="right">

????????????????????????????????????????? [

????????????????????????????????????????? <span><a href="#" onClick="CheckAll(form1.delId)"

???????????????????????????????????????????????? style="color: #FF0000;">全选</a>/ <a href="#"

???????????????????????????????????????????????? onClick="CheckInverse(form1.delId)" style="color: #FF0000;">反选</a>

????????????????????????????????????????? </span>]

?????????????????????????????????? </td>

??????????????????????????? </tr>

???????????????????? </table>

????????????? </form>

  相关解决方案