返回值:String, Arrayval()

Get the current value of the first element in the set of matched elements.

The .val() method is primarily used to get the values of form elements. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option.

For selects and checkboxes, you can also use the :selected and :checked selectors to get at values, for example: 

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

示例:

Get the single value from a single select and an array of values from a multiple select and display their values.

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

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

  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>

    <option selected="selected">Multiple3</option>
  </select>

<script>


    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " + 
                  singleValues +
                  " <b>Multiple:</b> " + 
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();



</script>
</body>
</html>
演示:

示例:

Find the value of an input box.

<!DOCTYPE html>
<html>
<head>
<style>

  p { color:blue; margin:8px; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<input type="text" value="some text"/>
  <p></p>

<script>


    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();


</script>
</body>
</html>
演示:

返回值:jQueryval(value)

Set the value of each element in the set of matched elements.

This method is typically used to set the values of form fields. For <select multiple="multiple"> elements, multiple <option>s can be selected by passing in an array.

The .val() method allows us to set the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: 

$('input:text.items').val(function(index, value) {
  return value + ' ' + this.className;
});

This example appends the string " items" to the text inputs' values.

示例:

Set the value of an input box.

<!DOCTYPE html>
<html>
<head>
<style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div>
    <button>Feed</button>
    <button>the</button>

    <button>Input</button>
  </div>
  <input type="text" value="click a button" />

<script>


    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });


</script>
</body>
</html>
演示:

示例:

Set a single select and a multiple select .

<!DOCTYPE html>
<html>
<head>
<style>
  body { color:blue; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

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

  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>

    <option selected="selected">Multiple3</option>
  </select><br/>
  <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

<script>



    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);



</script>
</body>
</html>
演示: