jquery - Toggle Checkbox if element has class -
i ahve list elements, class 'added' if clicked. element shall transferred form. therefore have made list of checkboxes, have same classes 'li' list.
i wrote jquery script, shall check, if 'li' clicked (hasclass) , proper checkbox should have attribute 'checked'. not working properly. don't know have made wrong...
html:
<div class="container"> <div class="row row-centered konf-wrapper-1"> <div class="col-md-4 label-wrap"> <h1 class="header-label">konzeption</h1> <ul class="li-wrap"> <li class="added haken">kommunikationsstrategie</li> <li class="0 hide-me add-btn point">zielgruppendefinition</li> </ul> </div> <div class="col-md-4 label-wrap"> <h1 class="header-label">kommunikationsmaßnahmen</h1> <ul class="li-wrap"> <li class="1 hide-me add-btn point">namensfindung & logoentwicklung</li> <li class="2 hide-me add-btn point">exposé</li> <li class="3 hide-me add-btn point">textdesign</li> <li class="4 hide-me add-btn point">anzeigenkampagnen</li> <li class="5 hide-me add-btn point">außenwerbung</li> <li class="6 hide-me add-btn point">bautafelgestaltung</li> </ul> </div> </div> <div class="row row-centered konf-wrapper-2 label-wrap"> <div class="col-md-4 label-wrap"> <h1 class="header-label">online-marketing</h1> <ul class="li-wrap"> <li class="8 hide-me add-btn point">website</li> <li class="9 hide-me add-btn point">social media</li> <li class="10 hide-me add-btn point">digitale präsentation</li> </ul> </div> <div class="col-md-4 label-wrap"> <h1 class="header-label">virtuelle welten</h1> <ul class="li-wrap"> <li class="11 hide-me add-btn point">innenvisualisierung</li> <li class="11 hide-me add-btn point">außenvisualisierung</li> <li class="12 hide-me add-btn point">virtuelle begehung</li> <li class="13 hide-me add-btn point">augmented reality</li> </ul> </div> </div> <button type="button" class="btn btn-primary added-btn" title="zur Übersicht." id="gesamt-weiter" >zum formular</button> </div> checkboxes:
<div class=""> <ul class="checker-wrap"> <li><input type="checkbox" id="0" value="zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="2" value="exposé" class="2 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="3" value="textdesign" class="3 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="4" value="anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="5" value="außenwerbung" class="5 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="6" value="bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="8" value="website" class="8 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="9" value="social media" class="9 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="10" value="digitale präsentation" class="10 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="11" value="visualisierungen" class="11 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="12" value="virtuelle begehung" class="12 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="13" value="augmented reality" class="13 checker" name="checkbox-group[]"></li> </ul> </div> jquery:
var $check = $(".checker-wrap"); $(".add-btn").click(function() { var $li = $(this).toggleclass("hide-me added haken"); var li_class = $(this).attr('class').split(" "); var $wrap = $li.closest('.label-wrap'); // trigger checkbox form if (($li).hasclass("added")) { $check.find('.'+li_class[0]).addattr('checked'); } else { $check.find('.'+li_class[0]).removeattr('checked'); } $wrap.find('h1').toggleclass('top-added', $wrap.find('.added').length > 0); }); so question is, have change, checkboxes triggered if li has class added, , if not, checkbox should unchecked...
use $check.find(class_check).prop('checked', 'checked'); instead of .addattr()
var $check = $(".checker-wrap"); $(".add-btn").click(function() { var $li = $(this).toggleclass("hide-me added haken"); var li_class = $(this).attr('class').split(" "); var $wrap = $li.closest('.label-wrap'); // trigger checkbox form $check.find('.'+li_class[0]).trigger('click'); if (($li).hasclass("added")) { var class_check = '.' + li_class[0]; $check.find(class_check).prop('checked', 'checked'); } else { $check.find('.'+li_class[0]).prop('checked', false); } $wrap.find('h1').toggleclass('top-added', $wrap.find('.added').length > 0); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row row-centered konf-wrapper-1"> <div class="col-md-4 label-wrap"> <h1 class="header-label">konzeption</h1> <ul class="li-wrap"> <li class="added haken">kommunikationsstrategie</li> <li class="0 hide-me add-btn point">zielgruppendefinition</li> </ul> </div> <div class="col-md-4 label-wrap"> <h1 class="header-label">kommunikationsmaßnahmen</h1> <ul class="li-wrap"> <li class="1 hide-me add-btn point">namensfindung & logoentwicklung</li> <li class="2 hide-me add-btn point">exposé</li> <li class="3 hide-me add-btn point">textdesign</li> <li class="4 hide-me add-btn point">anzeigenkampagnen</li> <li class="5 hide-me add-btn point">außenwerbung</li> <li class="6 hide-me add-btn point">bautafelgestaltung</li> </ul> </div> </div> <div class="row row-centered konf-wrapper-2 label-wrap"> <div class="col-md-4 label-wrap"> <h1 class="header-label">online-marketing</h1> <ul class="li-wrap"> <li class="8 hide-me add-btn point">website</li> <li class="9 hide-me add-btn point">social media</li> <li class="10 hide-me add-btn point">digitale präsentation</li> </ul> </div> <div class="col-md-4 label-wrap"> <h1 class="header-label">virtuelle welten</h1> <ul class="li-wrap"> <li class="11 hide-me add-btn point">innenvisualisierung</li> <li class="11 hide-me add-btn point">außenvisualisierung</li> <li class="12 hide-me add-btn point">virtuelle begehung</li> <li class="13 hide-me add-btn point">augmented reality</li> </ul> </div> </div> <button type="button" class="btn btn-primary added-btn" title="zur Übersicht." id="gesamt-weiter" >zum formular</button> </div> <div class=""> <ul class="checker-wrap"> <li><input type="checkbox" id="0" value="zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="2" value="exposé" class="2 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="3" value="textdesign" class="3 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="4" value="anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="5" value="außenwerbung" class="5 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="6" value="bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="8" value="website" class="8 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="9" value="social media" class="9 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="10" value="digitale präsentation" class="10 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="11" value="visualisierungen" class="11 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="12" value="virtuelle begehung" class="12 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="13" value="augmented reality" class="13 checker" name="checkbox-group[]"></li> </ul> </div> <div class=""> <ul class="checker-wrap"> <li><input type="checkbox" id="0" value="zielgruppendefinition" class="0 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="2" value="exposé" class="2 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="3" value="textdesign" class="3 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="4" value="anzeigenkampagnen" class="4 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="5" value="außenwerbung" class="5 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="6" value="bautafelgestaltung" class="6 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="8" value="website" class="8 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="9" value="social media" class="9 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="10" value="digitale präsentation" class="10 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="11" value="visualisierungen" class="11 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="12" value="virtuelle begehung" class="12 checker" name="checkbox-group[]"></li> <li><input type="checkbox" id="13" value="augmented reality" class="13 checker" name="checkbox-group[]"></li> </ul> </div>
Comments
Post a Comment