我正在尝试设置附加复选框的样式。如果我错了请纠正我,但我相信您可以通过“隐藏”复选框并改用标签样式来做到这一点。
最后我让它工作了,但是我有多个复选框并且不能对所有复选框起作用。我需要其他函数的计数器变量,所以我不能去掉计数器,除非你有更好的主意。
你能帮我修复复选框,以便它们:
- 切换旁边的输入文本字段的类(在演示中工作)
- 还可以切换复选框的 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");
});
提前致谢!
最佳答案
呸!有趣的问题。这是你的答案:
您没有增加计数器,因此它只适用于一个复选框。我还添加了在复选框本身上添加/删除 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");
});
关于jquery - 如何使用标签设置多个附加复选框的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18227407/