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
Post a Comment