HTML_jQuery中關於this的理解(複選框的全選,全不選,反選)
阿新 • • 發佈：2019-01-26
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>yoyo</title> <!--匯入jQuery--> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script type="text/javascript"> $(function(){ $("#selectAll").click( //全選~~~全不選 function(){ //this永遠代表的是dom(js)物件 //alert(this.checked); //這裡之所以可以直接.checked是因為這裡的this拿到的是 //jQuery中的dom物件,因為點選時如果沒有報錯且拿到了true //則說明可以直接this.屬性名來獲取屬性值 //然而我們應該知道jQuery獲取屬性值的方式並不是直接.屬性名 //而是通過attr("屬性名") // 或者prop("屬性名") //alert($(this).prop("checked")); //b.獲取其他的複選框,給這些複選框新增checked屬性 //$(".itemSelect").prop("checked",this.checked); //可以 //$(".itemSelect").prop("checked",$(this).prop("checked")); //也可以 $(".itemSelect").prop("checked",$("#selectAll").prop("checked"));//當然也可以 //$(".itemSelect").attr("checked",$("#selectAll").attr("checked")); //有問題 //這裡用attr不是報錯,但達不到想要的效果,所以要記住下面一句話: //prop():使用方式和attr一樣,優先使用attr方法,若attr方法不能用,換prop方法(版本升級後的產物) });//全選全不選 //反選 $("#fanXuan").click( function(){ //獲取所有的選擇框 var $item = $(".itemSelect"); for(var i = 0; i < $item.length; i++){ //注意:下面之所以又用.屬性名的方式進行操作,是因為$item[i]實際上是將jQuery物件轉成了 //DOM(js)物件 // js物件和jquery物件之間的轉換 //js物件 ----->jquery物件 : $(js物件); //jquery物件----->js物件 //方式1:jQuery物件[index] //方式2:jQuery物件.get(index) $item[i].checked = !$item[i].checked; } });//反選 }); //頁面載入成功 </script> </head> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <td colspan="5"> 全選/全不選<input type="checkbox" id="selectAll"> 反選<input type="checkbox" id="fanXuan"/> </td> </tr> <!--全選按鈕--> <tr> <th>請選擇您要的商品</th> <th>分類ID</th> <th>分類名稱</th> <th>分類描述</th> <th>操作</th> </tr> <!--1按鈕--> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手機數碼</td> <td>手機數碼類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> <!--2按鈕--> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>電腦辦公</td> <td>電腦辦公類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> <!--3按鈕--> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> <!--4按鈕--> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> </table> </body> </html>