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

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