揭秘：如何轻松用jQuery WeUI实现单选框的智能获取与操作

在Web开发中，单选框是用户进行选择的重要组件。jQuery WeUI是一个基于jQuery的UI组件库，可以帮助开发者快速构建美观且功能丰富的用户界面。本文将详细介绍如何使用jQuery WeUI实现单选框的智能获取与操作。

一、单选框的基本用法

在HTML中，单选框的标记通常如下所示：

<input type="radio" name="group1" value="option1"> 选项1 <input type="radio" name="group1" value="option2"> 选项2 <input type="radio" name="group1" value="option3"> 选项3

这里的name属性具有相同的值，表示这些单选框属于同一组，用户只能从这一组中选择一个选项。

二、jQuery WeUI单选框组件

jQuery WeUI提供了丰富的单选框样式和交互功能。要使用jQuery WeUI的单选框组件，首先需要在HTML中引入jQuery和jQuery WeUI的CSS和JS文件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-weui/1.2.0/jquery-weui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-weui/1.2.0/jquery-weui.min.js"></script>

然后，将HTML中的单选框标记替换为jQuery WeUI的单选框标记：

<div class="weui-cells"> <div class="weui-cell weui-cell-radio"> <div class="weui-cell__bd"> <input type="radio" class="weui-radio" name="radio1" id="radio1-1" value="option1"> <label for="radio1-1">选项1</label> </div> </div> <div class="weui-cell weui-cell-radio"> <div class="weui-cell__bd"> <input type="radio" class="weui-radio" name="radio1" id="radio1-2" value="option2"> <label for="radio1-2">选项2</label> </div> </div> <div class="weui-cell weui-cell-radio"> <div class="weui-cell__bd"> <input type="radio" class="weui-radio" name="radio1" id="radio1-3" value="option3"> <label for="radio1-3">选项3</label> </div> </div> </div>

三、单选框的智能获取与操作

1. 获取单选框的选中值

使用jQuery的.val()方法可以获取单选框的选中值：

// 获取名为"radio1"的单选框选中值 var selectedValue = $('input[name="radio1"]:checked').val(); console.log(selectedValue); // 输出选中值

2. 设置单选框的选中状态

使用.prop()方法可以设置单选框的选中状态：

// 设置名为"radio1-2"的单选框为选中状态 $('input[name="radio1"]').prop('checked', false); // 取消所有单选框的选中状态 $('input[name="radio1"]').eq(1).prop('checked', true); // 设置第二个单选框为选中状态

3. 监听单选框的变化

使用.on()方法可以监听单选框的变化：

// 监听名为"radio1"的单选框变化 $('input[name="radio1"]').on('change', function() { console.log('选中值：' + $(this).val()); });

4. 获取所有单选框的选中值

使用.map()方法可以获取所有单选框的选中值：

// 获取所有名为"radio1"的单选框选中值 var selectedValues = $('input[name="radio1"]:checked').map(function() { return $(this).val(); }).get(); console.log(selectedValues); // 输出选中值数组