jquery - Toggle show/hide with checkbox

Question

what im attempting:

1. On page load hide all elements
2. on change of checkbox toggle show/hide of element

css:

.hide{
     display: none;
}

markup:

<form id="checkThis">
    <input type="checkbox" data-target="hide1" class="ck">check1</input>
    <input type="checkbox" data-target="hide2"class="ck">check2</input>
</form>

<div id="theHidden">
  <div id="hide1" class='hide'>Im Hidden On Page Load</div>
  <div id="hide2" class='hide'>Im Hidden On Page Load Too</div>
</div>

Fiddle for edited question: http://jsfiddle.net/1tx18jcy/

Answer 1

<input type="checkbox" data-target='transom3' .../>    
<input type="checkbox" data-target='lsl3' .../>    
<input type="checkbox" data-target='door3' .../>
// ...

$(".partCheck").change(function(){
   $('#' + this.dataset.target).toggle(this.checked);
});

Answer 2

I believe this is what you are looking for...

http://jsfiddle.net/MYhTu/

$(".partCheck").click(function(){
  if ($(this).prop("checked")) {
        $("#"+$(this).val()).show();
  } else {
      $("#"+$(this).val()).hide();
  }
});

in the jsfiddle, you'll notice i updated the values to be equal to the id's of the parts they are associated with (i was guessing, but you can put in your own)

Answer 3

Replace Javascript with this line:

$(".partCheck").attr("onclick", "if($(this).prop('checked') $('#'+$(this).val()).show(); else $('#'+$(this).val()).hide();");

And set the values of checkboxes to equal the dev IDs.