JQ_表格的选取全选反选

最新推荐文章于 2024-04-29 17:42:02 发布

Circle_list

最新推荐文章于 2024-04-29 17:42:02 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/Circle_list/article/details/79348251

版权

<!DOCTYPE html>
<html lange="en"> 
<head>
<meta charset="UFT-8"> 
<title>Title</title>

</head>
<body>
  <input type="button" value="全选" οnclick="choseAll()"/>
  <input type="button" value="反选" οnclick="revserAll()"/>
  <input type="button" value="取消" οnclick="cancleAll()"/>
  <table border="1">
   <thead>
    <tr>
     <th>选项</th>
     <th>IP</th>
     <th>PORT</th>
    </tr>
   </thead>
   <tbody id="td">
    <tr>
     <td><input type="checkbox" /></td>
     <td>192.168.0.1</td>
     <td>80</td>
    </tr>
    <tr>
     <td><input type="checkbox"/></td>
     <td>192.168.0.2</td>
     <td>82</td>
    </tr>
    <tr>
     <td><input type="checkbox"/></td>
     <td>192.168.0.3</td>
     <td>83</td>
    </tr>
   </tbody>

  </table>
  <script src="jquery-1.12.4.js"></script>   
  <script>
   function choseAll(){
    console.log("choseall");
    /*$("#td :checkbox") 选择标签*/
    $("#td :checkbox").prop('checked',true);
   }
   function cancleAll(){
    $('#td :checkbox').prop('checked',false);
   }

   function revserAll1(){
    /*each() JQ中的循环在其中添加函数*/
    /*prop() 函数一个参数表示获取这个属性的值两个参数设置这个属性的值*/
    $('#td :checkbox').each(function (){
      console.log("revserAll");
      if(this.checked){
       this.checked = false;
      }else{
       this.checked = true;
      }
     })
   }

   /*
   document.getElementById('td'); --> <tbody id="td">...</tbody>
   $('#td'); -->[tbody#td, context: document, selector: "#td"]
   */
   /*$(this) 将Dom对象转换成JQ的对象*/
   function revserAll2(){
    $('#td :checkbox').each(function (){
     console.log("revserAll");

     if($(this).prop('checked')){
      $(this).prop('checked',false);
     }else{
      $(this).prop('checked',true);
     }
    })
   }

   function revserAll(){
    $('#td :checkbox').each(function (){

/*三目运算符：

条件？结果1：结果2

*/
     var v = $(this).prop('checked')?false:true;
     $(this).prop('checked',v);
    })
   }
  </script>

</body>
</html>