jQuery表格的选取全选反选（代码实例）_JavaScript

jQuery表格的选取全选反选（代码实例）

jquery表格的选取全选反选（代码实例）

<!doctype html>
<html lange="en">      <!-- 设置语音 -->
<head>
 <meta charset="uft-8"> <!-- 设置编码格式 -->
 <title>title</title>
 

</head>
<body>
  <input type="button" value="全选"  onclick="choseall()"/>
  <input type="button" value="反选" onclick="revserall()"/>
  <input type="button" value="取消" onclick="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>   <!-- 引入jq模块 -->
  <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>