1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

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

Тема в разделе "Web Coding", создана пользователем WKTP, 13 май 2020.

XEvil 4.0 Релиз Состоялся!
Модераторы: latteo
  1. WKTP

    WKTP Постоялец

    Регистр.:
    5 сен 2013
    Сообщения:
    53
    Симпатии:
    6
    Подсветить 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>
     
  2. secilius

    secilius Создатель

    Регистр.:
    1 фев 2014
    Сообщения:
    27
    Симпатии:
    36
    с помощью js попробуйте повесить событие на инпут, и при выполнении добавляйте клас лейблу с рамкой
     
  3. ec83840ae9

    ec83840ae9 Писатель

    Регистр.:
    19 апр 2020
    Сообщения:
    5
    Симпатии:
    2
    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() {
    ...
    });
    
     
    Последнее редактирование модератором: 20 май 2020
    WKTP нравится это.
  4. WKTP

    WKTP Постоялец

    Регистр.:
    5 сен 2013
    Сообщения:
    53
    Симпатии:
    6
    Thank you very much, it works!