jquery操作form要素

Web開発ではフォーム操作によく遭遇します.フォーム要素のタイプはtext、password、select、checkbox、radio、textarea、file、hidden、button、image、reset、submitであり、html 5の新しいタイプは含まれません.これらの一般的なフォーム要素の付与と値の取得操作について説明します.fileタイプは、別の文章を書く時間があります.
text、password、textarea、hidden操作:

$("selector").val()  //get value
$("selector").val(value) //set value

select操作:

$("selector").val()  //get select value
$("selector option:selected").text() //get select text
$("selector").val(value) //set value

radioアクション:

$("selector :checked").val()  //get radio checked value
$("selector [value="+ value+"]").prop('checked', true); //set radio checked by value
$("selector ").eq(index).prop('checked', true); //set radio checked by index

checkbox操作:

$("selector :checked").val()  //get single checkbox checked value
 
//get  checked array from checkbox group
var checkboxList=[]; 
$("selector :checked").each(function(index,item){
    checkboxList.push($(this).val());
}) 

$("selector [value="+ value+"]").prop('checked', true); //set checkbox checked by value
$("selector ").eq(index).prop('checked', true); //set checkbox checked by index

//set checkbox checked from checked array 
$("selector ").each(function(index,item){                                   
       $(this).prop("checked",$.inArray($(this).val(),checkboxList)!==-1)
})

//set all checkbox checked and not checked 
$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

//if the checkbox is checked
$("selector ").is(':checked')

//form serialize $('form').serialize()
総合例:

    
    
    




    

        

            Username:
            

                
            
        
        

            Password:
            

                
            
        
        

            Education:
            

                
                    --Please select--
                    Primary school
                    Middle school
                    Senior high school
                    University
                
            
        
        

            Sex:
            

                
                     Male
                
                
                     Female
                
            
        
        

            Interest:
            

                
                    Books
                
                
                    Music
                
                
                    Movies
                
                
                    Sports
                
                
                    Travel
                
            
        
        

            Introduction:
            

                            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">Sign up</button>
            </div>
        </div>
    </form>
    <script src="http://code.jquery.com/jquery-latest.js"/>
    <script>
    $(function() {
        var data = {
            username: "Ross",
            password: "123456",
            education: 2,
            sex: 1,
            interest: [0, 1, 4],
            introduction: "My name is Rosste"
        };

        //set value when form type is "text"、"password"、"hidden"、"textarea"
        $("input[name='username']").val(data.username);
        $("input[name='password']").val(data.password);
        $("textarea").val(data.introduction);

        //set select value
        $("select[name='education']").val(data.education);

        //set radio checked by value
        $("input[name='sex'][value=" + data.sex + "]").prop('checked', true);

        //set radio checked by index
        // $("input[name='sex']").eq(0).prop('checked', true);  

        //set checkbox group checked from checked array
        $("input[name='interest']").each(function(index, item) {
            $(this).prop("checked", $.inArray(parseInt($(this).val()), data.interest) !== -1)
        })

        //set checkbox checked by value
        // $("input[name='interest']").eq(0).prop('checked', true);

        //set checkbox checked by value
        // $("input[name='interest'][value=3]").prop('checked', true);  



        $("button").on("click", function(event) {
            //prevent it from submitting a form
            event.preventDefault();

            //get value when form type is "text"、"password"、"hidden"、"textarea"
            console.log($("input[type='text']").val(), "username")
            console.log($("input[type='password']").val(), "password")
            console.log($("textarea").val(), "introduction")

            //get select value
            console.log($("select").val(), "education")
                //get select text
                // console.log($("select option:selected").text(),"education text")

            //get checked value
            console.log($("input[type='radio']:checked").val(), "Sex");

            //get checked array from checkbox group
            var checkboxList = [];
            $("input[type='checkbox']:checked").each(function(index, item) {
                checkboxList.push(parseInt($(this).val()));
                console.log(checkboxList, "checkboxList");
            })

            //serialize the form for ajax to send to backend
            console.log(decodeURIComponent($('form').serialize()), "serialize")

        })

    })
    </script>




</code></pre> 
</article>
                            </div>
                        </div>