Remove closest label style

Question

I have 3 labels when I click on label bg color need to be added.and color removed for other labels.how to do it?

 $(document).ready(function() { $('.agentBtn').click(function() { $(this).css({ 'background': '#2196F3', 'color': '#fff' }); $(this).closest().find('label').removeAttr('style'); }); $('.ownerBtn').click(function() { $(this).css({ 'background': '#2196F3', 'color': '#fff' }); $(this).closest('label').removeAttr('style'); }); $('.otherBtn').click(function() { $(this).css({ 'background': '#2196F3', 'color': '#fff' }); $(this).closest().find('label').removeAttr('style'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="btn agentBtn"> <input type="radio" id="agent" name="advanced-search-beds" checked >Agent </label> <label class="btn ownerBtn"> <input type="radio" id="owner" name="advanced-search-beds">Owner </label> <label class="btn otherBtn"> <input type="radio" id="other" name="advanced-search-beds">Other </label> 

Answer 1

Since your other labels are siblings, you can use the siblings method from jQuery.

 $(document).ready(function(){ $('.btn').click(function(){ var $this = $(this); $this.css({'background':'#2196F3', 'color':'#fff'}); $this.siblings("label").removeAttr('style'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="btn"> <input type="radio" id="agent" name="advanced-search-beds" checked>Agent </label> <label class="btn"> <input type="radio" id="owner" name="advanced-search-beds">Owner </label> <label class="btn"> <input type="radio" id="other" name="advanced-search-beds">Other </label> 

Answer 2

you shouldnt use $(this).closest('label').removeAttr('style'); because ure applying to the "clicked" one. u need remove it to all labels excluding the clicked one. for example:

$(this).css({'background':'#2196F3', 'color':'#fff'});
$('label').not(this).removeAttr('style');

look at my example: https://jsfiddle.net/zLsnatck/

Answer 3

Something like this ?

 $(document).ready(function(){ $('.agentBtn').click(function(){ $(this).closest('div').find('label').removeAttr('style'); $(this).css({'background':'#2196F3', 'color':'#fff'}); }); $('.ownerBtn').click(function(){ $(this).closest('div').find('label').removeAttr('style'); $(this).css({'background':'#2196F3', 'color':'#fff'}); }); $('.otherBtn').click(function(){ $(this).closest('div').find('label').removeAttr('style'); $(this).css({'background':'#2196F3', 'color':'#fff'}); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label class="btn agentBtn"> <input type="radio" id="agent" name="advanced-search-beds" checked >Agent </label> <label class="btn ownerBtn"> <input type="radio" id="owner" name="advanced-search-beds">Owner </label> <label class="btn otherBtn"> <input type="radio" id="other" name="advanced-search-beds">Other </label> </div>