jquery - 如何使用标签设置多个附加复选框的样式

Question

我正在尝试设置附加复选框的样式。如果我错了请纠正我，但我相信您可以通过“隐藏”复选框并改用标签样式来做到这一点。

最后我让它工作了，但是我有多个复选框并且不能对所有复选框起作用。我需要其他函数的计数器变量，所以我不能去掉计数器，除非你有更好的主意。

你能帮我修复复选框，以便它们:

• 切换旁边的输入文本字段的类(在演示中工作)
• 还可以切换复选框的 css(在演示中不起作用，需要帮助)

HTML

<div id="container">
</div>
 <button id="appendbtn">append an answer</button>

CSS

body {
    background: #222222;
}
#container {
    background: #edece9;
    width: 300px;
    height: 300px;
}
#container div {
    height: 40px;
}
.green {
    color: green;
}
input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

jQuery

var counter = 0;

$("#container").append('<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<label for="checkbox' + (counter) + '">' + '</label>' + '<input value="mark this answer"  type="text" class="inputfield' + (counter) + '"/>' + '</div>' + '<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<label for="checkbox' + (counter) + '">' + '</label>' + '<input value="mark this answer"  type="text" class="inputfield' + (counter) + '"/>' + '</div>');

$("#appendbtn").click(function () {
    $('<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<label for="checkbox' + (counter) + '">' + '</label>' + '<input value="mark this answer"  type="text" class="inputfield' + (counter) + '"/>' + '</div>').appendTo('#container');
});

$("#container").delegate("input[type=checkbox]", "change", function () {
    $(this).nextAll().toggleClass("green");
});

$(".item").click(function () {
    $(this).next().toggleClass("clipped");
});

DEMO

提前致谢!

Answer 1

呸!有趣的问题。这是你的答案:您没有增加计数器，因此它只适用于一个复选框。我还添加了在复选框本身上添加/删除 class green 的功能。

Jquery 更改:(要求您以任何适合您的方式增加计数器。我只是试图模仿复选框所需的功能。处理计数器变量完全取决于您)

var counter = 0;

$("#container").append('<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<label for="checkbox' + (counter) + '">' + '</label>' + '<input value="mark this answer"  type="text" class="inputfield' + (counter) + '"/>' + '</div>');

counter++;

$("#container").append('<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<label for="checkbox' + (counter) + '">' + '</label>' + '<input value="mark this answer"  type="text" class="inputfield' + (counter) + '"/>' + '</div>');

counter++;

$("#appendbtn").click(function () { $('<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<label for="checkbox' + (counter) + '">' + '</label>' + '<input value="mark this answer"  type="text" class="inputfield' + (counter) + '"/>' + '</div>').appendTo('#container');
                                   counter++;
});

$("#container").delegate("input[type=checkbox]", "change", function () {
    $(this).toggleClass('green');
    $(this).nextAll().toggleClass("green");
});

$(".item").click(function(){
    $(this).next().toggleClass("clipped");

});

JS FIDDLE