onClick Div checked unchecked checkbox

Question

I have multiple Divs based rows. Each row contains a check box.

I want to click on that row anywhere, it should check uncheck that specific checkbox.

Here is the what I tried till now DEMO: http://jsfiddle.net/kERYB/19/ JS :

$('.row').click(function ()
{
    $(this).closest(":checkbox").attr("checked", checked");
});

HTML:

<div class="row">

  <div class="left">
      <input type="checkbox" class="cb-element" value="1" />    
  </div>

  <div class="left">
      <select><option>choose</option></select>    
  </div>  

  <div class="right">
      This is First Record    
  </div>    

    <div class="clear"></div>    

</div>


<div class="row">

  <div class="left">
      <input type="checkbox" class="cb-element" value="1" />    
  </div>

  <div class="left">
      <select><option>choose</option></select>    
  </div>     

  <div class="right">
      This is Second Record    
  </div>    

    <div class="clear"></div>    

</div>


<div class="row">

  <div class="left">
      <input type="checkbox" class="cb-element" value="1" />    
  </div>

  <div class="left">
      <select><option>choose</option></select>    
  </div> 

  <div class="right">
      This is Third Record    
  </div>    

    <div class="clear"></div>    

</div>

CSS:

.row {
    width:300px;
    padding:4px;
    border:1px solid #000;
    margin:2px;
} 

.left {
    float:left;
    width:50px;
}

.right {
    float:right;
}

.clear {
    clear:both;
}
}

Answer 1

You can do this without if condition.

Working Demo

Jquery

$('.row').click(function ()
{
   $(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
});

Update (with variable) See Demo

jQuery

$('.row').click(function ()
{
    var checkbox = $(this).find('input[type=checkbox]');
   checkbox.prop("checked", !checkbox.prop("checked"));
});

Update 2: Fixed Bug on Cliking input See Demo

$('input[type=checkbox]').click(function (e)
{
     e.stopPropagation();
         return true;
});

Update 3: Without jQuery See Demo

Wrap the row with label

<label>
<div class="row">
...
</div>
</label>

Update 4: To exclude select tag See Demo

$('input[type=checkbox], .row select').click(function (e)
{
     e.stopPropagation();
         return true;
});

Answer 2

Try with this one :

    $('.row').click(function ()
    {
        $(this).find('div:first input:checkbox').prop('checked', true)
    }    
);

Try in fiddle

Updated:

$('.row').click(function ()
{
    if($(this).find('div:first input:checkbox').is(':checked')){
        $(this).find('div:first input:checkbox').prop('checked', false)
    }
    else{
        $(this).find('div:first input:checkbox').prop('checked', true)
    }
});

Try in fiddle