05- Use jQuery operation input value of the value

Form control is our top priority, because once involves data exchange, can not be separated form the form of use, such as a registered user login function

Then through the upper section of the knowledge we learned, we use a method of operating jquery form controls:

$ (Selector) .val () // get the values and settings

See the following HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <! - Set cheked property indicates the currently selected option ->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃饭
            <input type="checkbox" value="b" />睡觉
            <input type="checkbox" value="c" checked=""/>打豆豆
    
    <! - set the selected property in the drop-down list to select the current option tag indicates ->
            <select name="timespan" id="timespan" class="Wdate"   >  
                <option value="1">8:00-8:30</option>  
                <option value="2" selected="">8:30-9:00</option>  
                <option value="3">9:00-9:30</option>  
            </select>  
            <input type="text" name="" id="" value="111" />
    </form>
    
</body>
</html>

Page showing the effect of:

Operation control code form as follows:

 <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            // First, get the value
                1 // Obtain radio button selected value value
                console.log($('input[type=radio]:checked').val())

                // 2. Check box is selected value, is the first to obtain a selected value
                console.log($('input[type=checkbox]:checked').val())

                // 3. Dropdown selected value

                var obj = $("#timespan option:selected");
                // Get the selected value
                was h = obj.val ();  
                console.log(time);
                // get the text
                var  time_text  = obj.text();  
                console.log("val:"+time+" text"+ time_text );

                4 // Get the text box value value
                console.log ($ ( "input [type = text]"). val ()) // get the value of the text box

                // II. Settings
                // 1. Set the radio buttons and checkboxes are checked items
                $('input[type=radio]').val(['112']);
                $('input[type=checkbox]').val(['a','b']);


                // 2. Set the selected value drop-down list box, you must select
                / * Since only a single value option, when set to select tag multiple.
                So we set multiple values, there is no way, but using select a single value and multiple values can be
                */
                $('select').val(['3','2'])

          
                // 3. Value value of the text box
                $ ( 'Input [type = text]'). Val ( 'try to try')




        })
    
    </script>

Author: Rangers

Date: 2019-09-08