如何使用 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/

哦，这正是我想要 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 。