Как добавить toggleClass к установленному флажку с помощью jQuery?

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>';

... имеет две дополнительные кавычки.Это должно быть:

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

Это сломает ваш селектор для события click.Но обратите внимание, это не сработает в любом случае, так как вы пытаетесь перехватить элемент, который не существует, пока не нажата ссылка «нажмите меня», поэтому вам нужно использовать .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');
});

Я предполагаю, что вы не устанавливаете проверенное состояние своих флажков динамически в true.