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

[WKTP]

Подсветить 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>

 

[secilius]

с помощью js попробуйте повесить событие на инпут, и при выполнении добавляйте клас лейблу с рамкой

 

[ec83840ae9]

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.

<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!