操作表單,在前端開發中是很常見的操作。jQuery為方便我們操作表單元素提供了完善的偽類選擇器。表單偽類選擇器,指的是根據“表單類型”來選擇的偽類選擇器。使用表單偽類選擇器,我們可以快速選取我們需要的表單元素,然後達到快速開發的目的,非常方便快捷。
在jQuery中,常用的表單偽類選擇器如下:
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("input:checkbox").attr("checked","checked"); }) </script> </head> <body> <p>喜歡的水果: <label><input type="checkbox"/>蘋果</label> <label><input type="checkbox"/>西瓜</label> <label><input type="checkbox"/>蜜桃</label> <label><input type="checkbox"/>梨子</label> </p> <p>性別: <label><input type="radio" name="gendar"/>男</label> <label><input type="radio" name="gendar"/>女</label> </p> </body> </html>
在浏覽器預覽效果如下:
分析:
$("input:checkbox")表示選擇所有復選框元素,attr("checked","checked")表示設置復選框的checked屬性值為checked。關於attr()方法,我們會在下一章中“jQuery屬性操作”這一節詳細給大家介紹。
對於其他表單偽類選擇器來說,它們的用法跟:checkbox選擇器是一模一樣的。大家參考一下:checkbox選擇器的實例,就能夠掌握其他表單偽類選擇器了。