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

151

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

js infinite loop

Попал в бесконечный луп с таким фильтром во vuejs:

111

javascript

Как зацыклить уже имеющийся цикл в JavaScript'e

Дали задание,имеется сайт с 1000+ страницами и на каждой из странице есть элемент который нужно нажатьЯ сделал цикл который ищет и нажимает...

135

javascript

Как лучше организовать модель корзины в mongodb

Помимо модели корзины, есть еще модель products и модель userУ меня есть два варианта организации: 1) Корзина хранит в себе только ID продуктов и будет...

149

javascript

пытаюсь дать название кнопкам по индексу, не выходит (17 строчка с верху) на js

189