jquery點擊一個隱藏的複選框

Question

我正在嘗試爲網站製作一個濾鏡。在哪裏我想刪除可見的複選框（我得到那個工作），刪除標籤等，只留下一個背景顏色< - 這一切工作。但現在我不知道如何使這些div的點擊能夠輸入字段隱藏。有沒有辦法解決這個問題在jQuery中？

這裏是我的代碼：

function onDataReceived(data) { 
     $.each(data.colorInfo, function(key, colorInfo) { 
      var inputElement = $("input[name^=filter][value="+colorInfo.id+"]").css("display", "none"); 
      var labelElement = $('label[for^=filter]').remove(); 
      var div = inputElement.parent(); 

      div.attr('class', 'myclass_'+colorInfo.id); 
      div.css("background-color", colorInfo.colorCode); 
      div.css("width", "15px"); 
      div.css("height", "15px"); 
      div.css("display", "inline-block"); 
      div.css("marginLeft", "5px"); 
      div.css("marginBottom", "5px"); 
      //console.log(colorInfo); 
     }); 
    } 

    $(document).ready(function() { 
     var url = 'myapi.json'; 
     $.get(url, onDataReceived); 
    }); 

和HTML：

<div class="filter_3"> 
    <input name="filter[]" value="152194" type="checkbox"/> 
    <label for="filter_152194">Rood</label> 
</div> 
<div class="filter_4"> 
    <input name="filter[]" value="152196" type="checkbox"/> 
    <label for="filter_152196">Blauw</label> 
</div> 
<div class="filter_5"> 
    <input name="filter[]" value="152198" type="checkbox"/> 
    <label for="filter_152198">Oranje</label> 
</div> 

Answer 1

假設有一次在div點擊調用的函數：

function onDataReceived(data) { 
    $.each(data.colorInfo, function(key, colorInfo) { 
     var inputElement = $("input[name^=filter] [value="+colorInfo.id+"]").css("display", "none"); 
     var labelElement = $('label[for^=filter]').remove(); 
     var div = inputElement.parent(); 

     div.attr('class', 'myclass_'+colorInfo.id); 
     div.css("background-color", colorInfo.colorCode); 
     div.css("width", "15px"); 
     div.css("height", "15px"); 
     div.css("display", "inline-block"); 
     div.css("marginLeft", "5px"); 
     div.css("marginBottom", "5px"); 
     /* Added Lines */ 
     div.css("pointer-events", "auto"); //Just in case, but it's probably not necessary 
     div.css("cursor", "pointer"); //It's nice to have 
     div.on('click', function() { //This is a click event delgated to the div 
      // Whatever code is needed when div is clicked 
     }); 
     //console.log(colorInfo); 
    }); 
} 

$(document).ready(function() { 
    var url = 'myapi.json'; 
    $.get(url, onDataReceived); 
});