樣式復選框並按標簽顯示內容不起作用

Question

我試圖隱藏一個復選框並使用它的標簽來選中或取消選中它。 我嘗試了各種方法，例如 display:none、visibility:hidden，但都沒有奏效。 請幫幫我

我的代碼：

$('.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
}