jquery 获取radio自定义属性

原创

mob649e816704bc 2024-11-25 05:14:52 ©著作权

文章标签 自定义属性 jQuery HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e816704bc的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何用jQuery获取Radio按钮的自定义属性

在这篇文章中，我将带你学习如何使用jQuery来获取Radio按钮的自定义属性。无论你是开发新项目，还是想提高自己的前端开发技能，掌握这项技能都将非常有用。

流程概述

接下来，我将为你展示整个流程。以下是实现步骤的表格：

步骤	描述
1	创建HTML结构，包括一个Radio按钮，并添加自定义属性
2	引入jQuery库
3	编写jQuery代码来获取Radio按钮的自定义属性
4	在浏览器中测试代码

Gantt图

我们可以用Gantt图来可视化这些步骤：

gantt
    title Radio按钮自定义属性获取流程
    dateFormat  YYYY-MM-DD
    section 步骤
    创建HTML结构           :a1, 2023-10-01, 1d
    引入jQuery库         :after a1  , 1d
    编写jQuery代码          :after a2  , 1d
    测试代码               :after a3  , 1d

步骤详解

步骤1：创建HTML结构

首先，我们需要创建一个简单的HTML页面，其中包含一个Radio按钮和一个自定义属性。下面是示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio按钮示例</title>
    <script src=" <!-- 引入jQuery库 -->
</head>
<body>

    <label>
        <input type="radio" name="option" value="1" data-custom="customValue1"> 选项1
    </label>
    <label>
        <input type="radio" name="option" value="2" data-custom="customValue2"> 选项2
    </label>

    <button id="getValue">获取选中的Radio的自定义属性</button>
    <p id="output"></p>

    <script>
    // 这里编写jQuery代码
    $(document).ready(function() {
        $('#getValue').click(function() { // 当按钮被点击时
            let customAttr = $('input[name="option"]:checked').data('custom'); // 获取选中的Radio的data-custom属性
            $('#output').text('选中的自定义属性值: ' + customAttr); // 显示结果
        });
    });
    </script>

</body>
</html>

步骤2：引入jQuery库

在上面的代码中，我们已通过以下代码引入了jQuery库：

<script src="

步骤3：编写jQuery代码来获取Radio按钮的自定义属性

在<script>标签中，我们使用以下代码来获取用户选择的Radio按钮的自定义属性：

$(document).ready(function() {
    $('#getValue').click(function() { // 监听按钮点击事件
        let customAttr = $('input[name="option"]:checked').data('custom'); // 获取选中的Radio的data-custom属性
        $('#output').text('选中的自定义属性值: ' + customAttr); // 显示结果
    });
});

代码解释：

$().ready()：确保DOM元素完全加载后再执行jQuery代码。
$('#getValue').click()：为按钮加上一个点击事件监听器。
$('input[name="option"]:checked').data('custom')：选中name为"option"的Radio按钮，并获取其自定义属性值。
$('#output').text()：将结果展示在页面上。