用JQ实现全选反选

用JQ实现全选反选
我们先写下html
这里我们用简单的表格来一个小案例

 <table>
   <tr>
     <th>序号 <input type="checkbox" id="checkedAll"></th>
     <th>名称</th>
     <th>价格</th>
     <th>数量</th>
   </tr>
   <tr>
     <td>1 <input type="checkbox" ></td>
     <td>apple手机</td>
     <td>5000</td>
     <td>10</td>
   </tr>
   <tr>
     <td>2 <input type="checkbox" ></td>
     <td>HTC手机</td>
     <td>5000</td>
     <td>10</td>
   </tr>
   <tr>
     <td>3 <input type="checkbox" ></td>
     <td>诺基亚手机</td>
     <td>5000</td>
     <td>10</td>
   </tr>
   <tr>
     <td>4 <input type="checkbox"  ></td>
     <td>三星手机</td>
     <td>5000</td>
     <td>10</td>
   </tr>
   <tr>
     <td>5 <input type="checkbox" ></td>
     <td>黑莓手机</td>
     <td>5000</td>
     <td>10</td>
   </tr>
 </table>

css简单的样式

 *{
      margin: 0;
      padding: 0;
    }
    table{
      width: 800px;
      margin: 50px auto;
    }
    table tr td{
      text-align: center;
      width: 150px;
      line-height: 30px;
    }
    .on{
      background-color: #EEE !important;
      color:green;
      cursor: pointer;
    }

下面就是js jq的代码了 用的时候不要忘记引用jq的库

//鼠标移入事件（添加一个属性，增加css的样式 on表示添加的样式，这里只是实现，具体样式可以在css on里面去更改自己想要的样式）
  console.log( $('tr'));
  $("tr:not('tr:first')").mouseover(function(){
    $(this).addClass('on')
  })
   //鼠标移出事件（删除刚刚的on）
  $('tr').mouseout(function(){
    $(this).removeClass('on')
  })
  //全选与反选
 $('#checkedAll').click(function(){
    let sta = $('#checkedAll').prop('checked');
    console.log(sta);
    $("input:not('#checkedAll')").prop('checked',sta)
  })