jquery - How do I change left with element label? -

my code this:

<label><li><input name="skills[]" class="skills" value="1" type="checkbox" /></li>a</label> <label><li><input name="skills[]" class="skills" value="2" type="checkbox" /></li>b</label> 

for change (left element) of checked checkbox, use code:

$('input.skills').on('change', function() { if($(this).is(':checked')) {     $(this).parents('li').append('<span class="text">add</span>'); } else {     $(this).parents('li').find('.text').remove();    }   $(this).animate({left:'500'},1000);   }); 

however don't change label location, change checked check box location.

you can move entire li. http://jsfiddle.net/pyuau/

html

<ul class="skill-holder">     <li><input name="skills[]" class="skills" value="1" type="checkbox" /></li> <li><input name="skills[]" class="skills" value="2" type="checkbox" /></li> </ul> 

css

.skill-holder > li {     position: relative; } 

js

$('.skill-holder').on('change', '.skills', function() {     var $this = $(this),         parent = $this.closest("li"),         moved; if(moved = $this.is(':checked')) {     parent.append('<span class="text">اضافه</span>'); } else {     parent.find('.text').remove();    }       parent.animate({left:moved ? 500: 0},1000);   });