Простейший вопрос от новичка. JQuery. Мало кода

20 февраля 2022, 09:30

<script>
  $('input[type=radio]').click(function(event){ 
     $("label").css({
      'background-color' : 'white'
     })
         });
</script>

Вот есть такой простенький скрипт, который при выборе инпута подсвечивает надпись возле него. Но этот скрипт подсвечивает все лэйблы на странице. Как сделать так, чтобы подсветился только тот лэйбл, на который нажимает пользователь ?

HTML имеет вот такую структуру.

<form>
    <label> <input type="radio" />_ Sample text_</label> 
</form>

Answer 1

$(document).ready(function() { 
  $('input[type=radio]').click(function(event) { 
    $(this).closest("label").css({ 
      'background-color': 'red' 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
 
  <label> 
    <input type="radio" />_ Sample text_ 1</label> 
 
  <label> 
    <input type="radio" />_ Sample text_ 2</label> 
 
  <label> 
    <input type="radio" />_ Sample text_ 3</label> 
 
</form>

Answer 2

Чтобы подкорректировать текущий код, нужно вместо $('label'), который выбирает все label на страницы, брать контейнер элемента по которому кликнули, в данном случае, клик идет по radio, который внутри label, следовательно достаточно взять $(this).parent()

$('input[type=radio]').click(function(event) { 
  $(this).parent().css({ 
    'background-color': 'red' 
  }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <label><input type="radio" />_ Sample text_</label> 
</form>