动态复选框onchange＆javascript

这对你来说可能是一件容易的事，但我卡住了，所以我希望你能帮助我。动态复选框onchange＆javascript

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

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

我宁愿有一个功能是从不同的被叫复选框，但我的JavaScript技能basicly不存在:)

这是我走到这一步，（这ofcourse不到风度工作） http://jsfiddle.net/Sz3BK/130/

来源

2013-12-13 Rosenthaler

代码请张贴代码在你的问题。额外的小提琴很好，但你的问题应该没有外部资源。 – Bergi

你的jsfiddle工作，如果函数没有包装在加载函数，行为在jsfiddle，看到没有包装：http://jsfiddle.net/Sz3BK/134/ –

@Bergi我会记住，下一次（可能需要再次帮助嘿嘿） – Rosenthaler

您有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。

您可能希望通过传递来扩展这个“你好”和“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。

来源

2013-12-13 11:10:49

这绝对是惊人的。非常感谢你的帮助（并感谢所有其他的贡献者）!!您不仅提供了答案，而且解释了为什么以及如何运作。太好了！ – Rosenthaler

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

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

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

来源

2013-12-13 11:11:43

这应该发表评论... –

检查我的jsfiddle代码 –

此代码工作正常，我：

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

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

});

检查fiddle。希望能帮助到你。

来源

2013-12-13 11:15:09

因为你动态地添加澈复选框，使这些后来添加的变化情况下，使用下面

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

来源

2013-12-13 11:16:33 coolboy88

动态复选框onchange＆javascript

回答

相关问题