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);

编辑

基于原始问题，我不确定为什么未选择此答案！

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

Answer 2

尝试使用CSS

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

设置CheckBox样式并按Label显示内容不起作用

2 个答案: