Form Selector trong jQuery

Bài này chỉ đưa ra các bộ chọn của form trong jQuery mà ta hay gặp

Mục Lục:

:input Selector

Cú pháp:

        jQuery( ":input" )
    

Chọn các thành phần input có thuộc tính type trùng với selector.

Ví dụ:

        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>input demo</title>
          <style>
          textarea {
            height: 25px;
          }
              </style>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>
         
        <form>
          <input type="button" value="Input Button">
          <input type="checkbox">
          <input type="file">
          <input type="hidden">
          <input type="image">
          <input type="password">
          <input type="radio">
          <input type="reset">
          <input type="submit">
          <input type="text">
          <select>
            <option>Option</option>
          </select>
          <textarea></textarea>
          <button>Button</button>
        </form>
        <div id="messages"></div>
         
        <script>
        var allInputs = $( ":input" );
        var formChildren = $( "form > *" );
        $( "#messages" ).text( "Found " + allInputs.length + " inputs and the form has " +
          formChildren.length + " children." );
         
        $( "form" ).submit(function( event ) {
          event.preventDefault();
        });
        </script>
         
        </body>
        </html>
    
Xem ví dụ »

:button Selector

Cú pháp:

        jQuery( ":button" )
    

Chọn các thành phần button.

Ví dụ:

        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>button demo</title>
          <style>
          textarea {
            height: 35px;
          }
          div {
            color: red;
          }
          fieldset {
            margin: 0;
            padding: 0;
            border-width: 0;
          }
          .marked {
            background-color: yellow;
            border: 3px red solid;
          }
          </style>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>
         
        <form>
          <fieldset>
            <input type="button" value="Input Button">
            <input type="checkbox">
         
            <input type="file">
            <input type="hidden">
            <input type="image">
         
            <input type="password">
            <input type="radio">
            <input type="reset">
         
            <input type="submit">
            <input type="text">
            <select>
              <option>Option</option>
            </select>
         
            <textarea></textarea>
            <button>Button</button>
          </fieldset>
        </form>
         
        <div></div>
         
        <script>
        var input = $( ":button" ).addClass( "marked" );
        $( "div" ).text( "For this type jQuery found " + input.length + "." );
        // Prevent the form from submitting
        $( "form" ).submit(function( event ) {
          event.preventDefault();
        });
        </script>
         
        </body>
        </html>

    
Xem ví dụ »

:checkbox Selector

Cú pháp:

        jQuery( ":checkbox" )
    

Chọn các thành phần checkbox.

Ví dụ:

        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>checkbox demo</title>
          <style>
          textarea {
            height: 25px;
          }
          </style>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>
         
        <form>
          <input type="button" value="Input Button">
          <input type="checkbox">
         
          <input type="checkbox">
          <input type="file">
          <input type="hidden">
         
          <input type="image">
          <input type="password">
          <input type="radio">
         
          <input type="reset">
          <input type="submit">
          <input type="text">
         
          <select>
            <option>Option</option>
          </select>
         
          <textarea></textarea>
          <button>Button</button>
        </form>
         
        <div></div>
         
        <script>
        var input = $( "form input:checkbox" )
          .wrap( "<span></span>" )
          .parent()
          .css({
            background: "yellow",
            border: "3px red solid"
          });
         
        $( "div" )
          .text( "For this type jQuery found " + input.length + "." )
          .css( "color", "red" );
         
        // Prevent the form from submitting
        $( "form" ).submit(function( event ) {
            event.preventDefault();
        });
        </script>
         
        </body>
        </html>
    
Xem ví dụ »

:selected Selector

Cú pháp:

       jQuery( ":selected" )
    

Chọn các thành phần selected.

Ví dụ:

        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>selected demo</title>
          <style>
          div {
            color: red;
          }
          </style>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>
         
        <select name="garden" multiple="multiple">
          <option>Flowers</option>
          <option selected="selected">Shrubs</option>
          <option>Trees</option>
          <option selected="selected">Bushes</option>
          <option>Grass</option>
          <option>Dirt</option>
        </select>
        <div></div>
         
        <script>
        $( "select" )
          .change(function() {
            var str = "";
            $( "select option:selected" ).each(function() {
              str += $( this ).text() + " ";
            });
            $( "div" ).text( str );
          })
          .trigger( "change" );
        </script>
         
        </body>
        </html>
    
Xem ví dụ »

:enable Selector

Cú pháp:

        jQuery( ":enabled" )
    

Chọn các thành phần enabled.

Ví dụ:

        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>enabled demo</title>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>
         
        <form>
          <input name="email" disabled="disabled">
          <input name="id">
        </form>
         
        <script>
        $( "input:enabled" ).val( "this is it" );
        </script>
         
        </body>
        </html>
    
Xem ví dụ »

:disable Selector

Cú pháp:

        jQuery( ":disabled" )
    

Chọn các thành phần disabled.

Ví dụ:

        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>disabled demo</title>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>
         
        <form>
          <input name="email" disabled="disabled">
          <input name="id">
        </form>
         
        <script>
        $( "input:disabled" ).val( "this is it" );
        </script>
         
        </body>
        </html>
    
Xem ví dụ »