CSS on selected checkbox

The CSS rule:

#product :checked + label {
  font-weight: bold;
}

will match a <label> that is an immediate sibling of a :checked item. In your case, the label is the parent of the checkbox. To make the text bold, you could wrap it in a <span> and then use the ~ combinator to select any matching siblings:

HTML

<div id="product">
   <div class="checkbox">
      <label>
        <input type="checkbox">
        <img src="http://test.com/dev/image/cache/catalog/chains/chain_1-50x50.jpg" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        <span>Chain 1 (+₱10.00)</span>
      </label>
   </div>
</div>

CSS

#product :checked ~ span {
  font-weight: bold;
}

The following should work if the HTML is as you have it in the question:

 #product :checked + img{
    border:1px solid red
 } 

If not, you likely have another element between the checkbox and the image. In which case, you can use #product :checked ~ img as above.

Your code will work for the image border, but the text bolding cannot be done in pure CSS without modifications to your HTML. If you cannot modify the HTML, you will need to use JavaScript like this:

document.querySelector("#product input").addEventListener("click", function() {
  var img = document.querySelector("#product img");
  var label = document.querySelector("#product label");

  if (this.checked) {
    img.style.border = "1px solid red";
    label.style.fontWeight = "bold";
  } else {
    img.style.border = "none";
    label.style.fontWeight = "normal";
  }
});

<div id="product">
  <div class="checkbox">
    <label>
        <input type="checkbox">
        <img src="http://via.placeholder.com/50x50" alt="Chain 1 +₱10.00" class="img-thumbnail"> 
        Chain 1 (+₱10.00)
        </label>
  </div>
</div>