动态复选框onchange&javascript

Question

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

我正在通过循环创建复选框,并且如果单击一个复选框,则希望在网站的某处指定文本.

我心中已经看到的解决方案,其中一个做一个脚本每个复选框,但这种情况可能练得很多,有时(是这样的:chckbx.onchange = function(){})

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

这是我到目前为止所得到的(当然不能正常工作) http://jsfiddle.net/Sz3BK/130/

Answer 1

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

您将使用jQuery的on()方法将事件委派给复选框的非动态祖先:

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

elem复选框的非动态祖先在哪里？

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

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

JSFiddle演示.

您可能希望通过传入"hello"和"1"作为data-*属性来扩展它:

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

在这里,我创建了两个带有两个data-*属性的复选框.在我们的jQuery方法中,我们可以testing()使用jQuery的data()方法提取这些值并将它们传递给我们的函数:

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

JSFiddle演示.

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

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

这会拉动我们的spanID(例如"1")并将其放在ID选择器中$('#1'),然后使用jQuery的text()方法修改文本.如果你想修改HTML,jQuery也有一个html()方法用于此目的.

最终的JSFiddle演示.