二、使用 jquery 实现获得页面上的单选按钮选中值、多选按钮选中 值、下拉框选中

使用jQuery可以很方便地获取页面上各种表单元素的选中值。下面分别介绍如何获取单选按钮、多选按钮和下拉框的选中值。

1. 获得单选按钮的选中值：
jQuery提供了:checked选择器，可以找到页面上选中的单选按钮，并使用val()方法获取其值。示例如下：

HTML代码：

<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女"> 女

jQuery代码：

var gender = $("input[name='gender']:checked").val();
console.log(gender);  // 输出选中的单选按钮的值

2. 获得多选按钮的选中值：
和单选按钮类似，多选按钮也可以使用:checked选择器来找到页面上选中的多选按钮，并使用val()方法获取其值。示例如下：

HTML代码：

<input type="checkbox" name="hobby" value="篮球"> 篮球
<input type="checkbox" name="hobby" value="足球"> 足球
<input type="checkbox" name="hobby" value="乒乓球"> 乒乓球

jQuery代码：

var hobbies = $("input[name='hobby']:checked").map(function(){
  return $(this).val();
}).get();
console.log(hobbies);  // 输出选中的多选按钮的值，以数组形式返回

3. 获得下拉框的选中值：
使用.val()方法可以获取下拉框选中的值。示例如下：

HTML代码：

<select id="city">
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广州">广州</option>
  <option value="深圳">深圳</option>
</select>

jQuery代码：

var city = $("#city").val();
console.log(city);  // 输出选中的下拉框的值

总结：通过使用:checked选择器和.val()方法，我们可以很方便地获取页面上的单选按钮、多选按钮和下拉框的选中值。