JavaScript Tutorial/jQuery/val

Материал из Web эксперт
Перейти к: навигация, поиск

30. Get input text from Text Box

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
                 alert($("input").val());
               
       });
   </script>
 </head>
 <body>
   <body>
     <button>Do</button>
     <form>
         <input type="text" />
     </form>
   </body>

</html></source>


30. Get the input value of the first matched element

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          function displayVals() {
             var singleValues = $("#single").val();
             $("p").html(singleValues);
          }
          $("select").change(displayVals);
       });
   </script>
 </head>
 <body>
   <body>

     <select id="single">
       <option>Single</option>
       <option>Single2</option>
     </select>
 </body>

</html></source>


30. Set multiple value for select

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("#multiple").val(["Multiple2", "Multiple3"]);
    
       });
   </script>
 </head>
 <body>
   <body>
      <select id="multiple" multiple="multiple">
           <option>Multiple</option>
           <option>Multiple2</option>
           <option>Multiple3</option>
     </select>
 </body>

</html></source>


30. Set the value attribute of every matched element

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("button").click(function () {
            var text = $(this).text();
            $("input").val(text);
          });
       });
   </script>
 </head>
 <body>
   <body>
     Press button to fill the text box.
       <button>A</button>
       <button>B</button>
       <button>C</button>
     <input type="text" value="click a button" />
 </body>

</html></source>


30. Set value for text field

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             $("input").removeAttr("disabled").focus().val("editable now");
       });
   </script>
 </head>
 <body>
   <body>
     <button>Enable</button>
     <input type="text" disabled="disabled" value="data"/>
 </body>

</html></source>


30. Set value to form input field

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
    $("label + input").css("color", "red").val("value")
 });
   </script>
 </head>
 <body>
     <form>
       <label>Name:</label>
       <input name="name" />
       <fieldset>
         <label>Address:</label>
         <input name="newsletter" />
       </fieldset>
     </form>
     <input name="none" />
 </body>

</html></source>


30. val(val) checks, or selects, all the radio buttons, checkboxes, and select options

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("#single").val("Single2");
               $("#multiple").val(["Multiple2", "Multiple3"]);
               $("input").val(["check1","check2", "radio1" ]);
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>
         <select id="single">
           <option>1</option>
           <option>2</option>
         </select>
         <select id="multiple" multiple="multiple">
           <option selected="selected">Multiple</option>
           <option>Multiple2</option>
           <option selected="selected">Multiple3</option>
         </select>
<input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body>

</html></source>