JQuery操作单选按钮以及复选按钮示例

下面我将为你详细讲解“JQuery操作单选按钮以及复选按钮示例”的完整攻略。

1. JQuery操作单选按钮

1.1. HTML结构

首先，我们先来看一下单选按钮的HTML结构:

<label>
  <input type="radio" name="gender" value="male" checked> 男
</label>
<label>
  <input type="radio" name="gender" value="female"> 女
</label>

这是两个单选按钮，它们都有一个共同的name属性，代表它们是一组。其中，checked表示默认选中的项。

1.2. JQuery代码

接下来，我们来看一下如何使用JQuery操作单选按钮：

$(document).ready(function() {
  // 获取所有的单选按钮
  var radios = $('input[type="radio"]');
  // 给每一个单选按钮添加change事件监听器
  radios.change(function() {
    // 获取选中的单选按钮的值
    var selectedValue = $('input[name="gender"]:checked').val();
    console.log('选中的值为：' + selectedValue);
  });
});

上面的代码首先获取了所有的单选按钮，并且给每一个单选按钮添加了change事件。当用户点击某个单选按钮时，就可以通过JQuery来获取到当前选中的单选按钮的值。

1.3. 示例应用

现在，我们来看一下一个示例应用。假设我们要实现一个在线调查问卷，其中有一个单选题，选项如下：

A. 0-20岁
B. 21-40岁
C. 41-60岁
D. 60岁以上

我们要在用户选择某个选项时，自动将选中的值显示在控制台上。

HTML结构如下：

<label>
  <input type="radio" name="age" value="A" checked> 0-20岁
</label>
<label>
  <input type="radio" name="age" value="B"> 21-40岁
</label>
<label>
  <input type="radio" name="age" value="C"> 41-60岁
</label>
<label>
  <input type="radio" name="age" value="D"> 60岁以上
</label>

JQuery代码如下：

$(document).ready(function() {
  // 获取所有的单选按钮
  var radios = $('input[type="radio"]');
  // 给每一个单选按钮添加change事件监听器
  radios.change(function() {
    // 获取选中的单选按钮的值
    var selectedValue = $('input[name="age"]:checked').val();
    console.log('选中的值为：' + selectedValue);
  });
});

当用户选择一项时，控制台会输出相应的选项值。

2. JQuery操作复选按钮

2.1. HTML结构

复选按钮的HTML结构如下：

<label>
  <input type="checkbox" name="hobby" value="reading"> 阅读
</label>
<label>
  <input type="checkbox" name="hobby" value="traveling"> 旅行
</label>
<label>
  <input type="checkbox" name="hobby" value="music"> 音乐
</label>

同样是一组复选按钮，共用同一个name属性。

2.2. JQuery代码

接下来，我们来看一下如何使用JQuery操作复选按钮：

$(document).ready(function() {
  // 获取所有的复选按钮
  var checkboxes = $('input[type="checkbox"]');
  // 给每一个复选按钮添加click事件监听器
  checkboxes.click(function() {
    // 获取当前选中的复选按钮的值
    var selectedValues = [];
    $('input[name="hobby"]:checked').each(function() {
      selectedValues.push($(this).val());
    });
    console.log('选中的值为：' + selectedValues.join(','));
  });
});

上面的代码首先获取了所有的复选按钮，并且给每一个复选按钮添加了click事件。当用户点击某个复选按钮时，就可以通过JQuery来获取到当前选中的所有复选按钮的值。

2.3. 示例应用

现在，我们来看一下一个示例应用。假设我们要实现一个在线注册页面，其中有一个多选题，选项如下：

A. 男
B. 女
C. 其他