0

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

最后我让它工作了，但是我有多个复选框并且不能对所有的复选框起作用。我需要其他功能的计数器变量，所以我不能摆脱计数器，除非你当然有更好的想法。

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

  • 切换旁边的输入文本字段的类（在演示中工作）
  • 但也可以自行切换复选框的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");
});

演示

先感谢您！

4

1 回答 1

1

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

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小提琴

于 2013-08-14T09:45:23.733 回答