Get started with jquery_jquery get started w3-优快云博客

本文介绍如何使用jQuery获取和设置HTML表单元素的值，包括文本框、选择框及单选按钮等，并提供代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Getting a form value with jQuery

To get a form value with jQuery use the val() function. Let's say we have a form like this, using an id for each form element:

 
   1<input name="foo" id="foo" type="text"> 
 
   2  
 
   3<select name="foo" id="bar"> 
 
   4    <option value="1">one</option> 
 
   5    <option value="2">two</option> 
 
   6    <option value="3">three</option> 
 
   7</select>

We can display an alert for the values of "foo" and "bar" as easily this:

`1`	`window.alert( $('#foo').val() );`

`2`	`window.alert( $('#bar').val() );`

If we're using the name only and not specifying an id, the jQuery to get the form values would be this:

`1`	`window.alert( $('[name=foo]').val() );`

`2`	`window.alert( $('[name=bar]').val() );`

If you have a group of radio buttons and want to get the selected button, the code is slightly different because they all have the same name. Using the above code examples will show the value for the first radio button on the form with that name. To find out the value of the checked one, do this instead:

HTML:

 
   1<input type="radio" name="baz" value="x"> 
 
   2<input type="radio" name="baz" value="y"> 
 
   3<input type="radio" name="baz" value="z">

jQuery:

`1`	`window.alert($('input[name=baz]:checked').val());`

Setting a form value with jQuery

You can set the form values with jQuery using the same val() function but passing it a new value instead. Using the same example forms above, you'd do this for the text input and select box:

 
   1$('#foo').val('this is some example text'); 
 
   2$('#bar').val('3'); 
 
   3OR 
 
   4$('[name=foo]').val('this is some example text'); 
 
   5$('[name=bar]').val('3');

Using the above for a radio button will change the actual value of the radio button rather than changing the one that is selected. To change the radio button that is selected you'd do this: