jQueryを使用してチェックボックスにtoggleClassを追加するにはどうすればよいですか？

Question

入力テキストフィールドとチェックボックスをクリックして追加します。 しかし、チェックボックスをオンにすると、私は入力テキストフィールドにClassをトグルします。 これは私の作成コードです：

jQuery(function() { 
var counter = 0; 

$('#appendbtn').click(function() { 
    var elems = '<div>' + '<input type="checkbox" id="checkbox"' + (counter) + '" class="item"/>' + '<input type="text" id="inputfield"' + (counter) + '"/>' + '</div>'; 
    $('#box').append(elems); 
    counter++; 
    return false; 
}); 

これはどうなるでしょうか。この勿論

if ($("#checkbox").is(":checked")) 
{ 
$("inputfield" + counter).toggleClass("complete") 
}); 

正しいではありませんが、私はあなたが私が何を意味するかを取得願っています;） は、if文なしで可能な方法で、このですか？ここ

はjsfiddle http://www.jsfiddle.net/gkdKY/

はOHであり、これは私がhttp://www.jsfiddle.net/xzmcL/ なく、添付のチェックボックスにしたい正確に何であります！

Answer 1

このライン：

var elems = '<div>' + '<input type="checkbox" id="checkbox"' + (counter) + '" class="item"/>' + '<input type="text" id="inputfield"' + (counter) + '"/>' + '</div>'; 

... 2つの余分な引用符を持っています。

var elems = '<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<input type="text" id="inputfield' + (counter) + '"/>' + '</div>'; 

これにより、clickイベントのセレクタが壊れます。しかし、あなたは 'click me'リンクが押されるまで存在しない要素をフックしようとしているので、それはとにかく動作しませんので、.live()または.delegate()を使用する必要があります。

このような何かがうまくいくかもしれない：

$("#drag").delegate("input[type=checkbox]", "change", function(){ 
    var index = this.id.substring(8); 
    $("#inputfield" + index).toggleClass("complete"); 
}); 

Answer 2

あなたが欲しい：

$('input:checkbox').click(function(){ 
    $('#inputfield').toggleClass('bold'); 
}); 

私は動的に真の状態をチェックし、あなたのチェックボックスを設定していないと仮定しています。