动态复选框onchange&javascript

Dynamic checkbox onchange & javascript

本文关键字：javascript amp 复选框 onchange 动态      更新时间：2023-09-26

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

我通过一个循环创建复选框，如果点击了复选框，我想在网站的某个地方指定一个文本。

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

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

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

您的问题中已经标记了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"answers"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方法中，我们可以提取这些值，并使用jQuery的data()方法将它们传递到testing()函数中：

$('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演示。

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

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

更改jsfiddle代码http://jsfiddle.net/Sz3BK/136/像这样。。。

Add <head></head> in HTML code at top..
and change on load to "No wrap - in head"

这段代码对我来说很好：

$('input[name=test]').change(function(){
    if($(this).is(':checked'))
    {
        alert("chk");
        // Checkbox is checked.
    }
    else
    {
        alert("unchk");
        // Checkbox is not checked.
    }    
});

检查小提琴。希望能有所帮助。

相关文章：