javascript - 动态复选框 onchange 和 javascript

Question

这对你来说可能很简单，但我被卡住了，所以我希望你能帮助我。

我正在通过循环创建复选框，并希望在单击复选框时在网站中的某处指定文本。

我见过为每个复选框制作脚本的解决方案，但有时结果可能会很多(像这样:chckbx.onchange = function(){})

我宁愿有一个从不同的复选框调用的函数，但我的 javascript 技能基本上是不存在的:)

这就是我到目前为止所得到的(这当然行不通) http://jsfiddle.net/Sz3BK/130/

Answer 1

你的问题中标记了 jQuery，所以我将提供一个 jQuery 答案:

你会使用 jQuery's on() method将事件委托(delegate)给复选框的非动态祖先:

$('elem').on('change', 'input[type="checkbox"]', function() {
    ...
});

elem 是复选框的非动态祖先。

在您的 JSFiddle 中，您的复选框不是动态的，但假设它是动态的，它最接近的非动态祖先将是文档的 body。因此，我们可以使用:

$('body').on('change', 'input[type="checkbox"]', function() {
    testing('hello', '1');
});

JSFiddle demo .

您可能希望通过将“hello”和“1”作为 data-* attributes 传递来扩展它:

<input type="checkbox" name="test" data-newvalue="hello" data-spanid="1" />
<input type="checkbox" name="test" data-newvalue="second" data-spanid="2" />

在这里，我使用两个 data-* 属性创建了两个复选框。在我们的 jQuery 方法中，我们可以提取这些值并使用 jQuery's data() method 将它们传递到我们的 testing() 函数中。 :

$('body').on('change', 'input[type="checkbox"]', function() {
    testing($(this).data('newvalue'), $(this).data('spanid'));
});

JSFiddle demo .

然后我们可以修改我们的 testing() 函数以也使用 jQuery:

function testing(newValue, spanID) {
    $('#'+spanID).text(newValue);
}

这会提取我们的 spanID(例如“1”)并将其放在 ID 选择器 $('#1') 中，然后使用 jQuery 的 text() 修改文本> 方法。如果您想改为修改 HTML，jQuery 也有用于此目的的 html() 方法。

Final JSFiddle demo .