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

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

1 个答案: