jq each遍历数据并且实现radio动态选中

最新推荐文章于 2024-08-15 11:16:03 发布

qq_39139042

最新推荐文章于 2024-08-15 11:16:03 发布

阅读量756

点赞数

分类专栏：笔记文章标签： jquery

原文链接：http://www.ljineng.com/#/home/fileInfo?index=1&id=388587

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中jQuery的each()方法和prop()方法的使用，特别是如何利用它们来动态选中匹配的radio按钮。当触发特定函数时，根据传入的数据ID与radio按钮的value进行比较，设置或取消选中状态。示例代码提供了两种实现方式，实现了数据与界面状态的同步更新。

摘要由CSDN通过智能技术生成

一、关于each()

each()定义

方法规定为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环。

each()用法

$(selector).each(function(index,element))

参数	说明
index	选择器的 index 位置
element	当前的元素（也可使用 “this” 选择器）

二、关于prop()

prop()定义

1、prop() 方法设置或返回被选元素的属性和值。

2、当该方法用于返回属性值时，则返回第一个匹配元素的值。

3、当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

prop()用法

$(selector).prop(property,value)

参数	说明
property	选择器的规定属性的名称。
value	当前的元素规定属性的值。

三、使用方式

主要实现功能：当触发该函数时获取指定参数并和单选框参数(value)对比且选中符合条件的radio

四、实现代码

方法一
/**
* each遍历数据并且实现jq radio动态选中
* @param obj
*/
function selectRadio(obj) {
    var id = $(obj).attr('data-id');
    $('input[type=radio]').each(function () {
        if ($(this).val() == id) {
            $(this).prop('checked',true);
        } else {
            $(this).prop('checked',false);
        }
    })
}
方法二
/**
* each遍历数据并且实现jq radio动态选中
* @param obj
*/
function selectRadio(obj) {
    var id = $(obj).attr('data-id');
    $('input[type=radio]').each(function () {
        $(this).val() == id ? $(this).prop('checked',true) : $(this).prop('checked',false)
    })
}