Отслеживание состояния checkbox

280

07 апреля 2017, 23:32

Есть 5 текстовых полей (input) и один checkbox. Необходимо сделать проверку если все 5 полей имеют одинаковое значение тогда checkbox имеет атрибут checked и при вводе в первое поле текст дублируется в 4 и 5 поле, а во второе и 3 идет транслитерация введенного текста. А если checkbox checked тогда при вводе в первое поле идет транслитерация во второе и все. Если мы сняли галочку а потом опять поставили опять текст должен вводится во все поля. Транслитерация с во второе поле происходит за счет плагина здесь проблем нет.
Вот что у меня есть:

var navigationsPageTitle = $('#navigations-page_title').val(), //Заголовок страницы 
  navigationsPrettyUrl = $('#navigations-pretty_url').val(), //Адрес странциы 
  navigationsAlias = $('#navigations-alias').val(), //Псевдоним 
  navigationsNavigationLabel = $('#navigations-navigation_label').val(), //Название в меню 
  navigationsBreadcrumbLabel = $('#navigations-breadcrumb_label').val(), //НАзвание в хлебных крошках 
  doubleFields = $('#double-fields'); //Checkbox 
 
 
if (navigationsPageTitle == navigationsNavigationLabel && 
  navigationsNavigationLabel == navigationsBreadcrumbLabel && 
  navigationsPrettyUrl == navigationsAlias) { 
  doubleFields.prop('checked', true); 
 
  if (doubleFields.prop('checked')) { 
    $('#navigations-page_title').on('keyup', function() { 
      $('#navigations-breadcrumb_label').val($(this).val()); 
      $('#navigations-navigation_label').val($(this).val()); 
      $('#navigations-alias').val($('#navigations-pretty_url').val()); 
 
    }); 
  } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="navigations-page_title" class="input" name="Navigations[page_title]"> 
<input type="checkbox" value="1" name="double[fields]" id="double-fields"> 
<input type="text" id="navigations-pretty_url" class="show" name="Navigations[pretty_url]"> 
<input type="text" id="navigations-alias" name="Navigations[alias]"> 
<input type="text" id="navigations-navigation_label" name="Navigations[navigation_label]"> 
<input type="text" id="navigations-breadcrumb_label" name="Navigations[breadcrumb_label]">

Код рабочий, но не как не могу реализовать логику

Answer 1

Описал для вас примерное поведение вашей логики с некоторыми уточнениями. Задача решается через 2 слушателя событий. для инпута и чекбокса.

let $input1 = $('input1'), 
  $input2 = $('input2'), 
  $input3 = $('input3'), 
  $input4 = $('input4'), 
  $input5 = $('input5'), 
  $checkbox = $('checkbox'), 
  checkboxChange = false; //флаг для чекбокса 
 
//При вводе в 1 дублируем в 4 и 5 
$input1.on('input', event => { 
  let value = event.target.value; 
 
  $input4.val(value); 
  $input5.val(value); 
 
  //Тут код транслитерации 
  let translate = '...'; 
 
  $input2.val(translate); 
  $input3.val(translate); 
 
  //Непонятно как вы хотите чтобы все 5 полей были равны между собой, если в 2 и 3 транслиртерация текста. Если эти поля автоматически заполняются, можно убрать их из проверки. 
  if ($input1.val() == $input4.val() && $input1.val() == $input5.val()) { 
    $checkbox.prop('checked', true); 
  } else { 
    $checkbox.prop('checked', false); 
  } 
}); 
 
$checkbox.on('change' 
  event => { 
    //Елси чекбокс установили в true и до этого его не меняли 
    if ($checkbox.prop('checked') && checkboxChange === false) { 
      checkboxChange = true; 
      //some logic.... 
    } 
  });