動態複選框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

回答

相關問題