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: / 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;
}
}

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;
}
}

• javascript
• jquery

6 Answers 6

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;
});

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

You can do it simply with HTML.

<input type="checkbox" class="cb-element" id="my-checkbox" value="1" />
<label for="my-checkbox">here you click to check or uncheck.</label>

id of 'input' should be value of 'for' attribute of 'label' tag.

Here checkbox id is 'my-checkbox' and in label --for="my-checkbox")--.

You can see an example: http://jsfiddle.net/kERYB/21/

You can use .find for this.

$(this).find('input[type=checkbox]').prop("checked", true);

http://api.jquery.com/find/

To check uncheck, use this -

$('.row').click(function ()
{
    var cb = $(this).find(':checkbox');
    if (cb.is(':checked')) {
      cb.prop('checked', false);
    } else {
      cb.prop('checked', true);
    }
});

Update Fiddle - http://jsfiddle.net/kERYB/14/

$(document).ready(function (){                
    $('.row').click(function (e){
        var cur = $(this).find('input[type=checkbox]');
        if(cur.prop("checked"))
        {
            $(this).find('input[type=checkbox]').prop("checked", false);
        }
        else
        {
            $(this).find('input[type=checkbox]').prop("checked", true);
        }
    });
});

this will be good for you....

$('.row').click(function ()
{
if ( $(this).find(".cb-element").prop('checked') == true){
     $(this).find(".cb-element").prop('checked', false);
}
else{
    $(this).find(".cb-element").prop('checked', true);
}
});

http://jsfiddle.net/kERYB/13/