Подсветить label(span) выбраного(ых) чекбокса(ов)

WKTP

Постоялец
Регистрация
5 Сен 2013
Сообщения
53
Реакции
7
Подсветить label(span) выбраного(ых) чекбокса(ов)
Есть код на сайте, input вынесен в отдельный div и нужно подсветить span при выборе чекбокса
Код:
<div>
<div><input id="443" type="checkbox" /></div>
   <label for="443">
       <span>AAA</span>
    </label>
<div><input id="444" type="checkbox" /></div>
   <label for="444">
       <span>BBB</span>
    </label>
<div><input id="445" type="checkbox" /></div>
   <label for="445">
       <span>CCC</span>
    </label>
</div>

В такой конструкции не могу сообразить как его подсветить, input в отдельном div...

Нагуглил такой пример, работает:
Код:
<style>
span {
  padding:4px;
}
:checked + span {
  border:1px solid #000;
  padding:3px;
}
</style>
<div>
   <label id="442">
       <input id="444" type="checkbox" />
       <span>AAA</span>
   </label>
</div>
 
с помощью js попробуйте повесить событие на инпут, и при выполнении добавляйте клас лейблу с рамкой
 
With jQuery you may create a "fake" class selector for all the checkboxes and try to add / remove class to highlight the <span> on checkbox click event.
HTML:
<div>
    <div>
      <input class="mysupercheckbox" id="443" type="checkbox" />
    </div>
    <label for="443">
      <span> AAA </span>
    </label>
    <div>
      <input class="mysupercheckbox" id="444" type="checkbox" />
    </div>
    <label for="444">
      <span> BBB </span>
    </label>
    <div>
      <input class="mysupercheckbox" id="445" type="checkbox" />
    </div>
    <label for="445">
      <span> CCC </span>
    </label>
</div>

Код:
$(".mysupercheckbox").change(function() {
    if(this.checked) {
      $(this).parent().next('label').find('span').addClass('classToHighlightSpan ');
    } else {
      $(this).parent().next('label').find('span').removeClass('classToHighlightSpan ');
    }
});

Of course, you may also use the type selector, instead of the 'fake' class selector, if you have only these checkboxes in your page.
Код:
$('input[type="checkbox"]').change(function() {
...
});
 
Последнее редактирование модератором:
  • Нравится
Реакции: WKTP
Thank you very much, it works!
 
Назад
Сверху