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

Question

入力テキストフィールドとチェックボックスをオンクリックします。ただし、チェックボックスがチェックされたら、入力テキストフィールドに合わせてトグを変更したいと思います。これは私の作成コードです：

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/

ああ、これはまさに私が欲しいものです 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');
});

チェックボックスのチェック状態を動的に真の状態に設定していないと思います。