jQuery怎么实现复选框全选和全不选

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选:

在网页中经常有复选框的全选和全不选效果，比如在后台新闻管理、用户空间信息管理等都有用到，下面就提供一个jQuery实现的此效果。代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>jQuery复选框全选全不选代码</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$.fn.checkCbx=function(){ 
  return this.each(function(){ 
    this.checked = !this.checked; 
  })
} 
$(function(){ 
  $("#btnSelect").click(function(){ 
    this.value = this.value == "全选"?"反选":"全选"; 
    $("input:checkbox").checkCbx(); 
  }) 
}) 
</script>
</head>
<body>
<form name="form1" method="post" action="Default8.aspx" id="form1">
  <table border="1">
    <tr>
      <th>选择</th>
      <th>id</th>
      <th>姓名</th>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>1</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>2</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>3</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>4</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>5</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>6</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>7</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>8</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>9</td>
      <td>蚂蚁部落</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbx" /></td>
      <td>10</td>
      <td>蚂蚁部落</td>
    </tr>
  </table>
  <input id="btnSelect" type="button" value="全选" />
</form>
</body>
</html>

以上代码实现复选框的全选和全不选效果。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0519/1933.html

最为原始地址是:http://www.softwhy.com

jQuery怎么实现复选框全选和全不选

相关推荐