动态复选框onchange＆javascript

Question

This might be an easy one for you, but I'm stuck, so I hope you can help me. 对你来说这可能很简单，但我被卡住了，所以我希望你能帮助我。

I'm creating checkboxes through a loop and want to specify a text somewhere in the website if a checkbox is clicked. 我正在通过循环创建复选框，并且如果单击一个复选框，则希望在网站的某处指定文本。

I'v seen solutions where a make a script for each checkbox, but that could turn out to be alot sometimes (something like this: chckbx.onchange = function(){} ) 我看过为每个复选框创建一个脚本的解决方案，但有时可能会变得很多（类似这样： chckbx.onchange = function(){} ）

I'd rather have one function that is called from different checkboxes, but my javascript skills is basicly non-existing :) 我宁愿有一个从不同的复选框调用的函数，但我的javascript技能基本上不存在:)

This is what i got so far (which ofcourse dosn't work) http://jsfiddle.net/Sz3BK/130/ 这是我到目前为止所得到的（当然不能正常工作） http://jsfiddle.net/Sz3BK/130/

Answer 1

You have jQuery tagged in your question, so I'm going to provide a jQuery answer: 你的问题中有jQuery标记，所以我将提供一个jQuery答案：

You'd use jQuery's on() method to delegate the event to a non-dynamic ancestor of your checkbox: 您将使用jQuery的on()方法将事件委托给复选框的非动态祖先：

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

Where elem is a non-dynamic ancestor of your checkbox. 其中elem是您的复选框的非动态祖先。

In your JSFiddle your checkbox isn't dynamic, but assuming it was, the closest non-dynamic ancestor of it would be the document's body . 在你的JSFiddle中，你的复选框不是动态的，但假设它是，它最接近的非动态祖先就是文档的body 。 Therefore, we can use: 因此，我们可以使用：

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

JSFiddle demo . JSFiddle演示 。

You may want to extend this by passing in "hello" and "1" as data-* attributes : 您可能希望通过传入“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" />

Here I've created two checkboxes with our two data-* attributes. 在这里，我创建了两个带有两个data-*属性的复选框。 In our jQuery method we can pull these values and pass them into our testing() function using jQuery's data() method : 在我们的jQuery方法中，我们可以使用jQuery的data()方法提取这些值并将它们传递给我们的testing()函数：

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

JSFiddle demo . JSFiddle演示 。

We can then modify our testing() function to also use jQuery: 然后我们可以修改我们的testing()函数以使用jQuery：

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

This pulls our spanID (eg "1") and places it within an ID selector $('#1') , then modifies the text using jQuery's text() method. 这会拉出我们的spanID（例如“1”）并将其放在ID选择器$('#1') ，然后使用jQuery的text()方法修改文本。 If you wanted to modify the HTML instead, jQuery also has a html() method for this purpose. 如果你想修改HTML，jQuery也有一个html()方法用于此目的。

Final JSFiddle demo . 最终的JSFiddle演示 。

Answer 2

because you are adding che checkboxes dynamicly, to enable the change event for those added later, use code below 因为您动态添加che复选框，为以后添加的更改事件启用更改事件，请使用下面的代码

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

Answer 3

Change your jsfiddle code http://jsfiddle.net/Sz3BK/136/ like this... 改变你的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

This code works fine for me: 这段代码对我来说很好：

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

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

});

Check the fiddle . 检查小提琴。 Hope it helps. 希望能帮助到你。

动态复选框onchange＆javascript

问题描述

4 个解决方案

解决方案1
7 已采纳 2013-12-13 11:10:49

解决方案2
1 2013-12-13 11:16:33

解决方案3
0 2013-12-13 11:11:43

解决方案4
0 2013-12-13 11:15:09

动态复选框onchange＆javascript

问题描述

4 个解决方案

解决方案1 7 已采纳 2013-12-13 11:10:49

解决方案2 1 2013-12-13 11:16:33

解决方案3 0 2013-12-13 11:11:43

解决方案4 0 2013-12-13 11:15:09

解决方案1
7 已采纳 2013-12-13 11:10:49

解决方案2
1 2013-12-13 11:16:33

解决方案3
0 2013-12-13 11:11:43

解决方案4
0 2013-12-13 11:15:09