Как сделать родительский div для ввода и метку для переключения дочернего ввода

Question

У меня есть вход и метка в div, например, так:

<div class="dropdown-item">
  <input id="inputId" name="filtercheckbox" type="checkbox" />
  <label for="inputId">Basic Label</label>
</div>

Я хочу, чтобы флажок ввода ставил / снимал флажок при нажатии на div, метку или ввод.

Я попытался сделать ширину и высоту метки 100%, которые не расширяются, чтобы охватить весь div.

Я также попробовал решение этого вопроса: изменить статус флажка (true / false) на divclick

Однако при нажатии на div теперь переключается ввод, при нажатии метки - нет. JSFiddle с вышеупомянутым реализованным решением находится здесь: http://jsfiddle.net/qk1dg79e/1/ Это самое близкое решение, к которому я пришел.

Я использую загрузчик, поэтому изменение свойства отображения в div не является вариантом.

Как сделать так, чтобы при нажатии на div, метку или ввод переключался ввод?

Answer 1

Самое простое решение - заменить элемент div элементом label, как показано ниже.

HTML:

<label for="inputId1" class="label">
  <input id="inputId1" name="filtercheckbox" type="checkbox" />Basic Label
</label>

CSS

.label {
  border: 1px solid red;
  border-radius: 4px;
  width: 100%;
  padding: 10px;
  display: block;
  box-sizing: border-box;
}

Answer 2

Вы можете добавить прослушиватель событий мыши вниз к элементам обертки и проверить, нажали ли вы на правильный элемент, например сам обертку, перед инвертированием состояния флажка.

Если вы щелкнете в красной области,это обнаружит это и инвертирует состояние флажка.

addToggleListenerToCheckboxWrapper('.dropdown-item'); // Add listener(s)

/**
 * Adds a checkbox toggle listener to the wrapping div.
 * 
 * @param {string|Element|NodeList} wrapper - Elements to add listener to.
 */
function addToggleListenerToCheckboxWrapper(wrapper) {
  if (typeof wrapper === 'string') wrapper = document.querySelector(wrapper);
  NodeList.prototype.isPrototypeOf(wrapper)
    ? Array.from(wrapper).forEach(__addToggleListenerToCheckboxWrapper)
    : __addToggleListenerToCheckboxWrapper(arguments[0]);
}

/**
 * @private
 */
function __addToggleListenerToCheckboxWrapper(wrapperElement) {
  wrapperElement.addEventListener('mousedown', function(e) {
    if (e.target === wrapperElement) {
      let checkbox = e.target.querySelector('input[type="checkbox"]');
      checkbox.checked = !checkbox.checked; // invert
    }
  }, false);
}

.dropdown-item {
  background: red;
}

<div class="dropdown-item">
  <input id="inputId" name="filtercheckbox" type="checkbox" />
  <label for="inputId">Basic Label</label>
</div>