在網(wǎng)頁開發(fā)中，表單是不可或缺的一部分。而獲取表單中的字段值也是經(jīng)常使用的操作之一。jQuery可以方便地獲取表單中的各個字段值。下面我們來看看具體的操作。

一、獲取輸入框的值

<input type="text" id="name">
<button id="submit-name">提交</button>
<script>
$('#submit-name').click(function(){
var nameValue = $('#name').val();
console.log(nameValue);
});
</script>

二、獲取下拉框的值

<select id="fruit">
<option value="apple">蘋果</option>
<option value="orange">橙子</option>
</select>
<button id="submit-fruit">提交</button>
<script>
$('#submit-fruit').click(function(){
var fruitValue = $('#fruit').val();
console.log(fruitValue);
});
</script>

三、獲取復選框的值

<input type="checkbox" id="fruit1" value="apple">蘋果
<input type="checkbox" id="fruit2" value="orange">橙子
<button id="submit-check">提交</button>
<script>
$('#submit-check').click(function(){
var fruit1Value = $('#fruit1').is(':checked') ? $('#fruit1').val() : '';
var fruit2Value = $('#fruit2').is(':checked') ? $('#fruit2').val() : '';
console.log(fruit1Value + ', ' + fruit2Value);
});
</script>

四、獲取單選框的值

<input type="radio" id="gender1" name="gender" value="male">男
<input type="radio" id="gender2" name="gender" value="female">女
<button id="submit-radio">提交</button>
<script>
$('#submit-radio').click(function(){
var genderValue = $('input:radio[name="gender"]:checked').val();
console.log(genderValue);
});
</script>

上面是獲取表單字段值的常用方法，通過jQuery簡單易懂地實現(xiàn)。希望對大家有所幫助。