JS - Form Selector

25/04/2019, 10:13 AM | 25/04/2019, 10:13 AM | 601 | 043

Nhóm Form Selector giúp truy vấn nhanh đến các đối tượng trong form, nhóm này xử dụng khá đơn giản bạn xem bảng dưới đây.
Bảng Form Selector trong jQuery

Cú pháp	Ý nghĩa
$(':button')	Lấy tất cả các thẻ có type=button hoặc thẻ button
$(':checkbox')	Lấy tất cả các thẻ có type=checkbox
$(':checked')	Lấy tất cả các thẻ đang là checked hoặc selected
$(':disabled')	Lấy tất cả các thẻ đang là disabled
$(':enabled')	Lấy tất cả các thẻ đang là enabled
$(':file')	Lấy tất cả các thẻ có type=file
$(':focus')	Lấy tất cả các thẻ đang được focus
$(':image')	Lấy tất cả các thẻ có type=image
$(':input')	Lấy tất cả các thẻ input, textarea, select và button
$(':password')	Lấy tất cả các thẻ có type=password
$(':radio')	Lấy tất cả các thẻ có type=radio
$(':reset')	Lấy tất cả các thẻ có type=reset
$(':selected')	Lấy tất cả các thẻ đang là selected ( các phần tử option của select được chọn )
$(':submit')	Lấy tất cả các thẻ có type=submit
$(':text')	Lấy tất cả các thẻ có type=text

Với bảng Form Selector trên bạn có thể kết hợp với các nhóm Selector khác để lấy được kiết quả như mong muốn. Ví dụ :
Đổi màu border cho các thẻ có thuộc tính type=text và có class=my-class

 <script language="javascript">
      $(document).ready(function(){

           $(':text.my-class').css('border','1px solid blue');
            
      });
</script>

Lấy nội dung của các đối tượng đang được selected, cộng vào chuỗi rồi in ra :

Xem DEMO

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
              div {
                color: red;
              }
              select{
                    width:200px;
              }
        </style>
        <script language="javascript">
              $(document).ready(function(){
                  var ab = $(':selected');
                  var str = "";
                  for(var i = 0; i < ab.length; i++){
                    
                    str += $( ab[i] ).text() + " ";

                  }
                  $( "div" ).text( str );
              });
        </script>
    </head>
    <body>
         <select name="garden" multiple="multiple">
          <option>Chelsea</option>
          <option selected="selected">Manchester UTD</option>
          <option>Arsenal</option>
          <option selected="selected">Manchester City</option>
          <option>Tottenham</option>
          <option>Liverpool</option>
        </select>
      <div></div>
    </body>
</html>

Các selector khác bạn có thể tự làm ví dụ. Chúc bạn thành công.