jQuery隔行换色和全选 /反选的实现

冷------

于 2020-08-18 08:54:22 发布

阅读量142

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/YKYZSYA/article/details/108069168

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>奇数偶数 和 全选 /反选</title>
  <script type="text/javascript" src="js/jquery1.11.3.min.js" ></script>
  <script>
   $(function(){
    $("tr:even").css({background:'red'});
    $("tr:odd").css({background:'blue'});
   });
   //全选
   function checkAll(){
    $("table input").each(function()
     $(this).prop("checked","checked");
     // 操作 属性名 checked  ,并赋值为 checked
     //$(this).attr("checked","checked"); 低版本写法
    });
   }
   //反选
   function reverseCheck(){
    $("table input").each(function(){
     var value = $(this).prop("checked"); // 拿到所有input标签中  checked的值
     $(this).prop("checked",!value); // 取反操作
    });
   }
  </script>
 </head>
 <body>
  <table border="1">
   <tr>
    <td><input type="checkbox" value="1"></td>
    <td>鲁班大师</td>
    <td>250</td>
   </tr>
   <tr>
    <td><input type="checkbox" value="2"></td>
    <td>虞姬</td>
    <td>100</td>
   </tr>
   <tr>
    <td><input type="checkbox" value="3"></td>
    <td>公孙离</td>
    <td>30</td>
   </tr>
   <tr>
    <td><input type="checkbox" value="4"></td>
    <td>马岱</td>
    <td>1000</td>
   </tr>
  </table>
  <input type="button" value="全选" onclick="checkAll()">
  <input type="button" value="反选" onclick="reverseCheck()">
 </body>
</html>

冷------

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery隔行换色和全选 /反选的实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>奇数偶数和全选 /反选</title> <script type="text/javascript" src="js/jquery1.11.3.min.js" ></script> <script> $(function(){ $("tr:even
复制链接

扫一扫

jQuery隔行换色 和 全选 /反选的实现

jQuery隔行换色和全选 /反选的实现