时间戳

首页 > 解决方案 > 通过 JQuery 的相应复选框仅适用于已解析的触发器

javascript - 通过 JQuery 的相应复选框仅适用于已解析的触发器

问题描述

我一直在寻找解决方案，但找不到。这可能是因为我以错误的方式搜索，但无论如何，如果没有外界的任何帮助，我无法解决我遇到的问题。

首先介绍一下背景：

我有我们正在使用的 MA 平台的嵌入式形式。由于可以在这些表单上进行的视觉调整非常有限，因此我决定隐藏其上的复选框并创建自己的复选框。选中这些复选框时，还必须选中嵌入表单上的相应复选框。

我还有一个复选框，它检查列表中的所有复选框。

现在的问题是，当我选中任何不是全选复选框的复选框时，嵌入表单上的相应框不会响应。每当我检查全选复选框时，他们都会这样做。

我在片段生成器中遇到了一个未知错误，这是我以前从未注意到的。

我在一个片段中提供了相关代码，并在我认为有问题的地方添加了注释。

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>

任何人都可以帮我一把，或者至少可以推动我朝着正确的方向前进吗？将不胜感激！

谢谢！汤姆

标签： javascriptjqueryhtmlforms

解决方案

检查所有复选框

HTML

<label>/<input>对

<label>[for]设置为表单控件值的属性#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伪类。为了缩小范围，通用和相邻的兄弟组合器（~和+分别）允许选择器采用特定路径。下面的示例为 a 声明了 2 个状态<label>：

默认（相邻兄弟组合+：）

input + fieldset label {color:black}


活动的（相邻的兄弟组合+：）

input:checked + fieldset label {color:red}

当 an<input>是:checked 并且如果下一个元素是<fieldset>嵌套的 a <label>(s)，则将<label>'s文本更改color:为red。

将相邻的组合器 ( +) 替换为通用组合器 ( ~)，声明将是：

主动（一般兄弟组合~：）

input:checked ~ fieldset label {color:red}

当 an<input>是:checked 并且如果其后的任何兄弟是<fieldset>嵌套的 a <label>(s)，则将<label>'s文本更改color:为red。

JavaScript

没有使用 jQuery，只使用了纯 JavaScript，其中不复杂的东西值得一提。如果您想查看该功能，Demo 中有一个分步说明。虽然它在 Demo 中并没有起到很大的作用。使用了HTMLFormControlsCollection API。

演示

// 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>

推荐阅读