样式复选框并按标签显示内容不起作用

Question

>我正在尝试隐藏一个复选框并使用它的标签来检查或取消选中它。我尝试了各种方法，例如显示：无，可见性：隐藏，但没有一种奏效。请帮帮我

我的代码：

$('.start').click(function() {
$.ajax({
url: 'tags',
method: 'get',
success: function(data){
var items = '';
$.each(data,function(i,item){
// checkbox for tags
var tag = "<label for=tag[] class = 'btn tag_label'>"+ "<input type = checkbox name =tag[] value = "+item.tag_id+"class = tag_checkbox>" + item.tag_name+"</label>";
$('.modal_tags').append(tag);
$('.tag_label').click(function(){
$(this).toggleClass('tag_label_clicked');
});
});
}
});
});

CSS

.tag_label{
border: 1px;
border-radius: 0.5em;
border-color:#000000;
}
.tag_label:hover{
background-color: #F7CD1F;
color: #000000;
font-weight: 900 !important;
transition: 0.1s linear;
border-radius: 0.5em;
}
.tag_label_clicked{
background-color: #F7CD1F;
color: #000000;
font-weight: 900 !important;
transition: 0.1s linear;
border-radius: 0.5em;
}
.tag_checkbox{
position: absolute;
opacity: 0;
}

提前感谢您的帮助

Answer 1

没有 HTML 很难...但是您隐藏了一个复选框并试图选中它？

向复选框添加样式，例如

style="opacity:0;"

或者更进一步使用;

style="position:absolute; opacity:0; left:99999px;"

另外，检查和取消选中它;

$('.tag_checkbox').prop('checked', true);
$('.tag_checkbox').prop('checked', false);

编辑

基于最初的问题，我不知道为什么没有选择这个答案！

这是一个带有 2 个复选框的 JSFiddle。 一个隐藏，一个不隐藏，两个标签均可单击，因此可以使用 Jquery 或单击标签来启用复选框。

Answer 2

尝试使用 css

input[type="checkbox"] {
display: none !important
}