Соответствующие чекбоксы через JQuery работают только на анализируемом триггере - PullRequest
Новая
       2

Соответствующие чекбоксы через JQuery работают только на анализируемом триггере

0 голосов
/ 17 мая 2018

Я искал решение проблемы выше и ниже, но не смог найти.Это может быть из-за того, что я ищу неправильно, но, в любом случае, я не могу решить возникшую проблему без помощи извне.

Сначала немного фона:

У меня есть встроенная форма платформы MA, которую мы используем.Поскольку настройки, которые можно сделать визуально в этих формах, очень ограничены, я решил спрятать флажки и создать свои собственные.При установке этих флажков необходимо также установить соответствующие флажки во встроенной форме.

У меня также есть флажок, который проверяет все флажки в списке.

Теперь проблема заключается в том, когда яОтметьте все флажки, которые не отмечены флажками, соответствующие поля во встроенной форме не отвечают.Всякий раз, когда я проверяю флажок check-all, они делают.

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

Я предоставил соответствующий код вфрагмент и добавил комментарии, где я думаю, что все идет не так. 

var clickedBox = "default";

		$(".checkall").click(function() {
			clickedBox = this.id;

      // This next block seems to be an issue
      // This is the block that selects all checkboxes when the #checkall one is checked.
      // Normally I have multiple of these lists on the page
			$("#" + clickedBox).change(function () {
				$("." + clickedBox + " input:checkbox").prop("checked", $(this).prop("checked"));
				$("." + clickedBox + " input:checkbox").val(parseInt($("." + clickedBox + " input:checkbox").val()) + parseInt(1)).trigger("change");
			});

      // This one does something weird as well, on unchecking it multiplies but I can find a solution for this by myself
			$("." + clickedBox + " input:checkbox").change(function () {
				if ( $("." + clickedBox + " input:checkbox:not(:checked)").length != 0 ) {
					$("#" + clickedBox).prop("checked", false);
					console.log("unchecked a checkbox");
				}
				else if ( $("." + clickedBox + " input:checkbox:not(:checked)").length == 0 ) {
					$("#" + clickedBox).prop("checked", true);
					console.log("checked a checkbox");
				}
			});

			$(".one").change(function () {
				$("#correspondingOne").prop("checked", $(this).prop("checked"));
			});
			$(".two").change(function () {
				$("#correspondingTwo").prop("checked", $(this).prop("checked"));
			});
			$(".three").change(function () {
				$("#correspondingThree").prop("checked", $(this).prop("checked"));
			});
			$(".four").change(function () {
				$("#correspondingFour").prop("checked", $(this).prop("checked"));
			});
			
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">

  <div class="card-header">
    <label>
      <input class="checkall" type="checkbox" id="checkall" />
      <strong><h3>Dropdown list of checkboxes</h3></strong>
    </label>
  </div>

  <div class="checkall checkboxes">
    <p><label><input type="checkbox" class="one" /> one </label></p>
    <p><label><input type="checkbox" class="two"/> two </label></p>
    <p><label><input type="checkbox" class="three" /> three </label></p>
    <p><label><input type="checkbox" class="four" /> four </label></p>
  </div>
</div>

Let's regard this one as the MA Form
<br><br>

<form>
  <label><input type="checkbox" id="correspondingOne" /> correspondingOne </label>
  <label><input type="checkbox" id="correspondingTwo" /> correspondingTwo </label>
  <label><input type="checkbox" id="correspondingThree" /> correspondingThree </label>
  <label><input type="checkbox" id="correspondingFour" /> correspondingFour </label>
</form>

Кто-нибудь, кто может дать мне руку или, по крайней мере, дать мне толчок в правильном направлении?Будем весьма признательны!

Спасибо!Том

Ответы [ 2 ]

0 голосов
/ 19 июля 2018

Проблема в коде, который я разместил, заключается в том, что функции изменения (ниже приведен пример) 

$(".one").change(function () {
   $("#correspondingOne").prop("checked", $(this).prop("checked"));
});

включены в функцию $ (". Checkall"). Click. Это означает, что они активируются только после нажатия на элемент с class = "checkall".

Перемещение их наружу решает эту проблему.

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

0 голосов
/ 18 мая 2018

Поставить галочку Все

HTML

<label> / <input> Пары

<label> атрибут [for] установлен в значение управления формой s #ID устанавливает связь между ними. При щелчке <label> связанный <input> также запускается этим событием щелчка. 

<label for="ID"></label>// Click label...
<input id="ID" type="checkbox">// ...checkbox will become un/checked

CSS

Псевдо-элементы

Каждый флажок скрыт и размещен в верхней части страницы. Каждый <label>, связанный с флажком, имеет псевдоэлемент ::before вместо соответствующего флажка.

Общий / Смежный родственный комбинатор и :checked Псевдокласс

В каждом поле есть 2 состояния: checked = true/false. Флажки могут влиять на стили всех предшествующих родственных элементов и их потомков с псевдоклассом :checked и без него . Чтобы сузить это, общие и смежные братские комбинаторы (~ и + соответственно) позволяют селектору принять конкретный путь. Пример ниже объявляет 2 состояния для <label>:

По умолчанию ( соседний братский комбинатор: +) 

input + fieldset label {color:black}


Активно ( соседний братский комбинатор: +) 

input:checked + fieldset label {color:red}
              ?

Если <input> равен :checked и если следующий элемент является <fieldset>, который имеет вложенный <label>(s), то измените текст <label>'s color: на red.

Замените соседний комбинатор (+) на общий комбинатор (~), и объявление будет следующим:

Активно ( общий брат и сестра комбинатор: ~) 

input:checked ~ fieldset label {color:red}
              ?

Если <input> равен :checked и если любой последующий элемент является <fieldset>, который имеет вложенное <label>(s), то измените текст <label>'s color: на red.

JavaScript

jQuery не использовался, только простой JavaScript, который не был сложным, чтобы оправдать что-либо, о чем стоит упомянуть В демоверсии есть пошаговое описание, если вы хотите просмотреть функцию. Хотя это не сыграло большой роли в Демо. API HTMLFormControlsCollection .

Демо 

// See HTMLFormControlsCollection in post

// Reference the form tag
var card = document.forms.card;

// Reference all form controls of form tag
var ui = card.elements;

// Register the ALL checkbox (input#c0) to the change event
ui.c0.addEventListener('change', chxAll);

// Callback function passes Event Object
function chxAll(e) {

  // Declare increment counter outside of loop
  var c = 1;
  // Ternary checks to see if input#c0 is checked
  var all = e.target.checked ? true : false;

  // Loop thruogh the next 4 inputs...
  for (c; c < 5; c++) {

    // Check/uncheck each checkbox in ui HTMLCollection 
    ui[c].checked = all;
  }
  // Open the details tag (optional)
  document.querySelector('.options').open = true;
}
html,
body {
  font: 400 16px/1.2 Consolas;
  font-variant: small-caps;
  width: 100%;
  height: 100%;
}

.chx {
  display: none
}

.lab {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}

.lab::before {
  content: '\1f518';
  box-shadow: 0px 1.5px 1px 2.5px rgba(51, 51, 51, 0.3);
  border-radius: 50%;
}

#c1:checked~.header .options .c1::before,
#c2:checked~.header .options .c2::before,
#c3:checked~.header .options .c3::before,
#c4:checked~.header .options .c4::before {
  content: '\1f535';
  box-shadow: 0px 1.5px 1px 2.5px rgba(15, 102, 241, 0.5);
}

#c0:checked~.header .c0::before,
#c0:checked+#c1:checked~.header .options .c1::before,
#c0:checked~#c2:checked~.header .options .c2::before,
#c0:checked~#c3:checked~.header .options .c3::before,
#c0:checked~#c4:checked~.header .options .c4::before {
  content: '\1f534';
  box-shadow: 0px 1.5px 1px 2.5px rgba(241, 102, 15, 0.5);
}

#c1:checked+#c2:checked+#c3:checked+#c4:checked+.header .c0::after {
  content: ' Selected';
  color: rgba(15, 102, 241, 1);
  text-shadow: 1.5px 2px 1.75px rgba(15, 102, 241, 0.7);
}

#c0:checked+#c1:checked+#c2:checked+#c3:checked+#c4:checked+.header.header .c0::after {
  content: ' Selected';
  color: rgba(241, 102, 15, 1);
  text-shadow: 1.5px 2px 1.75px rgba(241, 102, 15, 0.7);
}

#c1:not(:checked)~.header .c0::after,
#c2:not(:checked)~.header .c0::after,
#c3:not(:checked)~.header .c0::after,
#c4:not(:checked)~.header .c0::after {
  content: '';
}

#c1:not(:checked)~.header .c0::before,
#c2:not(:checked)~.header .c0::before,
#c3:not(:checked)~.header .c0::before,
#c4:not(:checked)~.header .c0::before {
  content: '\1f518';
  box-shadow: 0px 1.5px 1px 2.5px rgba(51, 51, 51, 0.3);
}

.header {
  border: 3px inset rgba(51, 51, 51, 0.51);
  border-radius: 5px;
  -webkit-padding-before: 0.0em;
  -webkit-padding-start: 0.15em;
  -webkit-padding-end: 0.15em;
  -webkit-padding-after: 0.15em;
  box-shadow: 0px 1.5px 1px 2.5px rgba(51, 51, 51, 0.3);
  width: 380px;
}

legend {
  height: 35px
}

legend h3 {
  font-size: 1.55rem;
  line-height: 2;
  transform: translateY(-35px);
}

.options {
  background: rgba(3, 9, 27, 0.1);
  border: 3px inset rgba(51, 51, 51, 0.15);
  border-radius: 5px;
  box-shadow: 0px -2px -1px 0px rgba(51, 51, 51, 0.15);
}

summary {
  padding: 3px 5px;
  font-size: 1.2rem;
  cursor: pointer;
}
<form id='card'>

  <input type="checkbox" class="chx" id="c0" />
  <input type="checkbox" class="chx" id='c1' />
  <input type="checkbox" class="chx" id='c2' />
  <input type="checkbox" class="chx" id='c3' />
  <input type="checkbox" class="chx" id='c4' />

  <fieldset class='header' name="header">
    <legend>
      <h3>List of Checkboxes</h3>
    </legend>
    <label for='c0' class='c0 lab'> All Options</label>

    <details class="options">
      <summary>Select Options</summary>
      <label for='c1' class='c1 lab'> One </label>
      <label for='c2' class='c2 lab'> Two </label>
      <label for='c3' class='c3 lab'> Three </label>
      <label for='c4' class='c4 lab'> Four </label>
    </details>

  </fieldset>

</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...