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')); });
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
Post a Comment