SHARE
TWEET

Untitled

icw82 Mar 16th, 2017 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <style>
  6. /* Лучше выносить в отдельный файл и подключать тут же */
  7.     body{padding: 20px}
  8.     .b-example-form{max-width: 300px}
  9.     .b-example-form__frame{margin-bottom: 20px; border: 2px solid}
  10.     .b-example-form ul{margin: 0; padding: 0; list-style: none}
  11.  
  12.     .b-example-form.mod_1 .b-example-form__frame label{background-color: aqua}
  13.     .b-example-form.mod_2 .b-example-form__frame{
  14.         border-top-color: chartreuse;
  15.         border-right-color: darkorange;
  16.         border-bottom-color: cyan;
  17.         border-left-color: brown;
  18.     }
  19. </style>
  20.  
  21. </head>
  22. <body>
  23.  
  24. <form class="b-example-form">
  25.     <fieldset class="b-example-form__frame">
  26.         <legend>Какими браузерами Вы пользуетесь:</legend>
  27.         <ul>
  28.             <li class="b-example-form__item chrome">
  29.                 <input type='checkbox' name="browser"
  30.                    value="chrome" id="chrome" />
  31.                 <label for="chrome">Google Chrome</label>
  32.             </li>
  33.             <li class="b-example-form__item opera">
  34.                 <input type='checkbox' name="browser"
  35.                    value="opera" id="opera" />
  36.                 <label for="opera">Opera</label>
  37.             </li>
  38.             <li class="b-example-form__item ie">
  39.                 <input type='checkbox' name="browser"
  40.                    value="ie" id="ie" />
  41.                 <label for="ie">Internet Explorer</label>
  42.             </li>
  43.         </ul>
  44.     </fieldset>
  45.     <button>Отправить</button>
  46. </form>
  47.  
  48. </body>
  49.  
  50. <script>
  51. // Лучше выносить в отдельный файл и подключать в конце тела страницы
  52.  
  53. (function(){ // Изолирование кода, чтобы не засорять глобал.
  54.     // Выбираем все элементы с классом .b-example-form
  55.     var blocks = document.querySelectorAll('.b-example-form');
  56.  
  57.     // Перебор блоков если они есть (в данном случае будет всего одна итерация)
  58.     blocks && blocks.forEach(function(block) {
  59.        var model = [];
  60.  
  61.         // Находим элементы формы
  62.         var items = block.querySelectorAll('.b-example-form__item');
  63.  
  64.         // Перебираем, если элементы есть
  65.         items && items.forEach(function(item) {
  66.  
  67.            // Добавляем в модель
  68.            var item = {
  69.                element: item.querySelector('[type="checkbox"]'),
  70.                get value() {return this.element.value},
  71.                get state() {return this.element.checked}
  72.            }
  73.  
  74.            model.push(item);
  75.  
  76.             // Вешаем обработчк событий (в данном случае просто обновление вида)
  77.             item.element.addEventListener('change', update);
  78.  
  79.         });
  80.  
  81.         // Функция для доступа к элементам модели
  82.         function get_by_value(value) {
  83.             return model.find(function(item) {
  84.                 return item.value === value
  85.             });
  86.         }
  87.  
  88.         function update() {
  89.             // Первое условие
  90.             (function() {
  91.                 var item = get_by_value('ie');
  92.  
  93.                 if (item.state) {
  94.                     block.classList.add('mod_1');
  95.                 } else {
  96.                     block.classList.remove('mod_1');
  97.                 }
  98.             })();
  99.  
  100.             // Второе условие
  101.             (function() {
  102.                 var item_1 = get_by_value('chrome');
  103.                 var item_2 = get_by_value('opera');
  104.  
  105.                 if (item_1.state && item_2.state) {
  106.                    block.classList.add('mod_2');
  107.                 } else {
  108.                     block.classList.remove('mod_2');
  109.                 }
  110.  
  111.             })();
  112.         }
  113.     });
  114. })();
  115.  
  116. </script>
  117. </html>
RAW Paste Data
Top