javascript - ToggleClass jQuery for only ONE element of li -


i trying add background color checkbox , text after user clicks on (checking it). in here though, adds in of list not li clicked.

html

<li class="parent_category">   <ul>       <li class="behind">               <label>                   <input type="checkbox">                   text3 text text               </label>        </li>        <li class="behind">               <label>                   <input type="checkbox">                   text2 text text               </label>        </li>        <li class="behind">               <label>                   <input type="checkbox">                   text1 text text               </label>        </li>        <li class="behind">               <label>                   <input type="checkbox">                   text4 text text               </label>        </li>   </ul> </li> 

jquery

define([], function(){   var main = function(data, options) {      $(function () {       $(".parent_category").click(function() {          $(this).toggleclass("selected");       });        $("label.parent_category").click(function(e) {          $(e.currenttarget).toggleclass("background");       });     });     console.log("select recommended loaded");   }   return main; }); 

and sass file

.parent_category float: right margin: 15px &.selected   border: 4px solid #ffe400   ul       width: 100%       padding: 0px       li           padding-left: 20px           border-bottom: 1px solid #cccccc           display: block           &:last-child               border-bottom: none  .behind display: none  .background background-color: #cccccc width: 100% 

so i'm trying achieve > want background of 1 li (the whole row) go gray when user ticks it, , go normal state when user unclicks it. also, right when click on tick 'selected' class gets toggled making li disappear , don't want that!

i didn't get, why add click event on element $("label.parent_category") - don't have such in html structure.. typo?

try variant:

$('.parent_category input:checkbox').on('change', function(){         var $checkbox = $(this);         $checkbox.closest('label').toggleclass('background', $checkbox.is(':checked'));     }); 

instead of

$("label.parent_category").click(function(e) { $(e.currenttarget).toggleclass("background"); }); 

Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -