Question

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

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

我看到过为每个复选框制作一个脚本的解决方案，但有时可能会变得很多（类似这样：chckbx.onchange = function(){}）

我宁愿让一个函数从不同的复选框调用，但我的javascript技能基本上不存在：）

这是我到目前为止所得到的（当然这不起作用） http://jsfiddle.net/Sz3BK/130/

Answer 1

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

您可以使用jQuery's on() method将事件委派给复选框的非动态祖先：

$('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

Answer 2

因为你动态添加che复选框，要为以后添加的更改事件启用更改事件，请使用下面的代码

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

Answer 3

像这样改变你的jsfiddle代码http://jsfiddle.net/Sz3BK/136/ ......

Add <head></head> in HTML code at top..

and change on load to "No wrap - in head"

Answer 4

此代码适用于我：

$('input[name=test]').change(function(){

    if($(this).is(':checked'))
    {
        alert("chk");
        // Checkbox is checked.
    }
    else
    {
        alert("unchk");
        // Checkbox is not checked.
    }    

});

检查fiddle。希望它有所帮助。

动态复选框onchange＆amp; JavaScript的

4 个答案: