Показать сообщение отдельно
  #6 (permalink)  
Старый 28.12.2017, 14:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .bl_filters__lable {
    position: relative;
    display: block;
    min-height: 36px;
    width: 100%;
  }

  .bl_filters__input {
    position: absolute;
    left: 0;
    visibility: hidden;
    opacity: 0;
  }

  .filter_text {
    margin-left: 25px;
    font-weight: 400;
    position: relative;
    display: block;
    width: 100%;
    color: #000;
    cursor: pointer;
  }

  .filter_text:hover,
  .filter_text:focus {
    color: #00f;
  }

  .filter_text span {
    font-weight: bold;
  }

  .decor_lickCheckbox:before {
    position: absolute;
    left: -24px;
    top: 4px;
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid #1e232c;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: 2;
  }

  td.checked + td > .filter_text {
    font-weight: bold;
    color: #00f;
  }

  td.checked + td > .decor_lickCheckbox:before {
    border: 1px solid #00f;
    background-color: #00f;
  }

</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
  [].forEach.call(document.querySelectorAll('.manufacturer_value'), function(item) {
          item.addEventListener('change', function() {
              item.checked ? item.parentNode.classList.add("checked"):
              item.parentNode.classList.remove("checked")
          });
      });
  });
</script>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>
          <input id="manufacturer_48" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="48">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_48">KAIDA (12)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_9" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="9">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_9">Lucky John (22)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_36" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="36">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_36">Okuma (1)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_23" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="23">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_23">Winner (4)</label>
        </td>
      </tr>
      <tr>
        <td>
          <input id="manufacturer_10" class="manufacturer_value filtered bl_filters__input" type="checkbox" name="manufacturer[]" value="10">
        </td>
        <td>
          <label class="filter_text decor_lickCheckbox" for="manufacturer_10">Salmo (463)</label>
        </td>
      </tr>
    </tbody>
  </table>

</body>
</html>
Ответить с цитированием