jquery - Check a checkbox by clicking the parent container? -


instead of having click little specific checkbox area, id check checkbox clicking parent container, here example fiddle. instead of adding color red, id check box within li.

i tried looking answer couldnt find looking for, should quite simple, might fun some.

html:

<li class="option table selected"> <div class="cell" id="left">     <div class="fontawesome-menu"></div> </div> <div class="cell" id="center">     <div class="option-text">i green eggs</div> </div> <div class="cell" id="right">     <div class="option-checkbox">         <div class="check"></div>         <input name="personalization_result[memory_0]" type="hidden" value="0">         <input id="personalization_result_memory_0" name="personalization_result[memory_0]" type="checkbox" value="1">     </div> </div> </li> 

jquery:

$('li').click(function () {     $(this).addclass('seuss'); }); 

please check fiddle better understanding of question.

you can this:

original without changing <label>s:

$('li').click(function(){     var el = $(this).toggleclass('seuss');     el.find('input[type=checkbox]').prop('checked', el.hasclass('seuess')); }); 

updated using <label>s:

html:

<li class="option table selected">     <label for="personalization_result_memory_0">         <div class="cell" id="left">             <div class="fontawesome-menu"></div>         </div>         <div class="cell" id="center">             <div class="option-text">i green eggs</div>         </div>         <div class="cell" id="right">             <div class="option-checkbox">                 <div class="check"></div>                 <input name="personalization_result[memory_0]" type="hidden" value="0">                 <input id="personalization_result_memory_0" name="personalization_result[memory_0]" type="checkbox" value="1">             </div>         </div>     </label> </li> 

javascript:

$('input[type=checkbox]').change(function(){     var el = $(this).closest('li').toggleclass('seuss'); }); 

note, when wrap input in <label>, should use for attribute.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -