如何通过jQuery触发存储在checkbox data属性中的JavaScript方法

你当前的代码仅获取了data-display属性中的字符串，并没有执行对应的函数。以下是几种可行的实现方式：

方式一：使用eval执行字符串（简单但需注意安全风险） #

如果能确定data-display中的内容完全安全可信，可以直接用eval执行获取到的字符串：

$("#id001").click(function(){
    eval($(this).data("display"));
});

方式二：拆分函数名与参数（更安全的方式） #

避免使用eval带来的安全隐患，可以拆分存储函数名和参数，再手动调用函数：
先修改HTML的data属性，分开存储函数名和参数：

<input type="checkbox" id="id001" data-func="checkDisplayOption" data-params='["p1","p2","p3"]'>

然后在jQuery中实现调用逻辑：

$("#id001").click(function(){
    const funcName = $(this).data("func");
    const params = $(this).data("params");
    // 先确认函数存在再执行
    if (window[funcName] && typeof window[funcName] === 'function') {
        window[funcName](...params);
    }
});

方式三：直接绑定函数推荐 #

如果允许调整代码结构，最好不要把函数调用逻辑存在data属性中，直接在点击事件里调用函数会更清晰安全：

$("#id001").click(function(){
    checkDisplayOption(p1, p2, p3);
});

注意：如果p1、p2、p3是动态变量，要确保在点击事件触发时这些变量处于可用状态。

内容的提问来源于stack exchange，提问作者Sajal Saxena