jQuery cung cấp một tập các bộ lọc áp dụng cho các phần tử trong form như checkbox, button, textbox,…để việc lập trình trở nên dễ dàng hơn. Danh sách các bộ lọc cho form như bảng dưới đây:

Selector Mô tả
:button Dùng cho button hay các input kiểu button, submit, reset.
:checkbox Dùng cho input kiểu checkbox.
:checked Dùng trong trạng thái được chọn (checked) cho checkbox, radio hay select (thỉnh thoảng bộ lọc này gây ra những ứng xử không như mong đợi như ví dụ 4).
:disabled Chọn các phần tử trong tình trạng vô hiệu hoá (disabled).
:enabled Chọn các phần tử trong tình trạng cho phép (enabled).
:file Dùng cho input kiểu file.
:focus Chọn các phần tử có focus tại thời điểm selector thực thi.
:image Dùng cho input kiểu image.
:input Dùng cho các phần tử của form (button, input, select, textarea).
:password Dùng cho input kiểu password.
:radio Dùng cho input kiểu radio.
:reset Dùng cho input kiểu reset hay button kiểu reset.
:selected Dùng cho select ở trạng thái được chọn.
:submit Dùng cho input kiểu submit hay button kiểu submit.
:text Dùng cho input kiểu text.

Cho đoạn mã HTML sau:


<form action="">

   Tên: <input type="text" name="user"><br>

   Mật khẩu: <input type="password" name="password"><br>

   Sở thích:<br>

   Âm nhạc <input type="checkbox"><br>

   Du lịch <input type="checkbox" checked="checked"><br>

   Lập trình <input type="checkbox"><br>

   Giới tính:

     Nam <input type="radio"> Nữ <input type="radio" checked="checked"> <br>

   Quốc gia:

   <select>

     <option selected="selected">Việt Nam</option>

     <option>Mỹ</option>

     <option>Anh</option>

     <option>Pháp</option>

    </select><br>

    <button type="button" disabled="disabled">Useless Button</button>

    <input type="reset" value="Huỷ">

    <input type="submit" value="Đăng nhập"><br>

</form>

Ví dụ 1: Chọn tất cả các phần tử (gán màu nền vàng) trong form gồm input, button, đoạn mã jQuery trong tập tin MyjQuery.js như sau:


$(":input").css("background-color", "yellow");

Kết quả

Ví dụ 2: Chọn phần tử có focus (gán màu nền vàng), đoạn mã jQuery trong tập tin MyjQuery.js như sau:


$(":text").focus();// thiết lập focus cho input kiểu text

$(":focus").css("background-color", "yellow");// chọn text với focus

Kết quả

Ví dụ 3: Chọn tất cả các phần tử được phép sử dụng (enabled) (gán màu nền vàng), đoạn mã jQuery trong tập tin MyjQuery.js như sau:

$(":enabled").css("background-color", "yellow");

Kết quả

Ví dụ 4: Chọn các checkbox và radio được chọn (checked) (gán màu nền đỏ), đoạn mã jQuery trong tập tin MyjQuery.js như sau:


// dùng phương thức wrap để gán màu nền cho checkbox hay radio

$(":checked").wrap("<span style='background-color:red'>");

Kết quả

Chú ý: khi dùng bộ lọc :checked với checkbox hay radio thì chúng ta dùng phương thức wrap để gán màu nền, nhưng sẽ ảnh hưởng đến option của select được chọn (có thể biến mất). Nếu dùng với select thì không cần dùng phương thức wrap. Có thể viết:


// chỉ ảnh hưởng đến option được chọn của select, giống :selected

$(":checked").css("background-color", "yellow");

Kết quả

Ví dụ 5: Chọn option của select được chọn – tức Việt Nam (gán màu nền đỏ), đoạn mã jQuery trong tập tin MyjQuery.js như sau:


$(":selected").css("background-color", "red");

Kết quả

< Học jQuery