icw82

Untitled

Mar 16th, 2017
81
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

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×