jQuery-清除更改功能中的输入

Question

如何更改on.change checkbox函数，以便当我按清除键时它会重置输入并运行函数的else部分？

我尝试将this.checked更改为：if ($('input').is(':checked')) {，以便在单击清除时可以切换$(":checkbox").trigger("change");以模拟取消选中所选复选框的功能，但该功能从未执行。

如果单击四处，您将快速查看该功能的分解方式。单击前两个输入然后清除时，此方法效果很好，但单击第三个输入则失败。

奖励要点，如果有人可以告诉我为什么CSS过渡在此摘录中起作用，而不是在站点甚至在此Codepen上起作用：https://codepen.io/moofawsaw/pen/PvKmJW

预期的行为是使标记的大小不会像在代笔中那样增大/缩小。该片段是预期的动画！

$("#m_clear").on("click", function() {
  if ($(":checkbox").prop('checked') == true) {
    $(":checkbox").prop("checked", false);
    $(":checkbox").trigger("change");
  }
});
$(":checkbox").on("change", function(e) {
  var label = $(this).next("label");
  var dot = label.find(".dot");
  var tagbox = $(this).closest(".tagbox");
  var cancel = label.find(".cancel--tagbox");
  var color = label.data("rgb");
  var rgb = `rgb(${color})`;
  var contrast = darkness(color) ? "#202124" : "#fdfdfd";

  if (this.checked) {
    dot.toggleClass("off on");
    dot.css("height", "0px");
    dot.css("width", "0px");
    cancel.css("color", contrast);
    cancel.toggleClass("on off");
    cancel.css("width", "12px");

    tagbox.css({
      "background-color": rgb,
      color: contrast,
      "border-color": rgb,
      color: contrast
    });
  } else {
    dot.toggleClass("off on");
    dot.css("height", "12px");
    dot.css("width", "12px");
    cancel.toggleClass("on off");
    cancel.css("width", "0px");

    tagbox.css({
      "background-color": "#fff",
      color: "",
      "border-color": ""
    });
  }
});

function darkness(color) {
  color.replace(/^\D+|\)/g, "").trim();
  //console.log(color);
  var rgb = color.split(",");
  //console.log(rgb);
  var final =
    parseInt(rgb[0], 10) + parseInt(rgb[1], 10) + parseInt(rgb[2], 10);
  //console.log(final);
  if (final < 384) {
    return false;
  }
  return true;
}

label {
  display: flex;
  align-items: center;
  font: 400 12px/16px Roboto Mono, monospace;
  letter-spacing: -0.2px;
  padding: 4px 0;
  user-select: none;
  cursor: pointer;
}

.tagboxes {
  display: flex;
  padding: 3rem;
  list-style: none;
}

.tagbox {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0.3rem;
  transition: 0.1s ease-in-out;
}

.text--tagbox {
  margin-right: 3px;
}

.cancel--tagbox {
  width: 0px;
  height: 12px;
  margin-top: -3px;
  color: purple;
  transition: width 0.25s ease;
}

.dot {
  margin-right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: all 0.25s ease;
}

dot.off {
  transform: scale(0);
}

dot.on {
  transform: scale(1);
}

.cancel--tagbox.off {
  transform: scale(0);
}

.cancel--tagbox.on {
  transform: scale(1);
}

#i1+label .dot {
  background-color: rgb(49, 231, 182);
}

#i2+label .dot {
  background-color: rgb(0, 0, 255);
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
<button id="m_clear">Clear All</button>

<div class="tagboxes">

  <div class="tagbox">
    <input id="i0" type="checkbox">
    <label data-rgb="255,64,129" for="i0">
    <mark style="background-color: rgb(255, 64, 129);" class="dot on"></mark>
    <b class='text--tagbox'>Lobster</b>
    <i class="fas fa-times cancel--tagbox off"></i>
  </label>
  </div>

  <div class="tagbox">
    <input id="i1" type="checkbox">
    <label data-rgb="49,231,182" for="i1">
    <mark class="dot on"></mark>
    <b class='text--tagbox'>Tuna</b>
    <i class="fas fa-times cancel--tagbox off"></i>
  </label>
  </div>

  <div class="tagbox">
    <input id="i2" type="checkbox">
    <label data-rgb="0,0,255" for="i2">
    <mark class="dot on"></mark>
    <b class='text--tagbox'>Pine</b>
    <i class="fas fa-times cancel--tagbox off"></i>
  </label>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.9.0/js/all.js" data-auto-replace-svg="nest"></script>

Answer 1

.prop（）方法仅获取匹配集中第一个元素的属性值。

因此，如果第一个未设置为选中状态，将不会触发更改事件。

Answer 2

使用每个的

循环是解决方案。将each与this一起使用，如下所示。

$("#m_clear").on("click", function() {
  $(':checkbox').each(function(index, element) {
    if ($(this).prop('checked') == true) {
      $(this).prop("checked", false);
      $(this).trigger("change");
    }
  });

});
$(":checkbox").on("change", function(e) {
  var label = $(this).next("label");
  var dot = label.find(".dot");
  var tagbox = $(this).closest(".tagbox");
  var cancel = label.find(".cancel--tagbox");
  var color = label.data("rgb");
  var rgb = `rgb(${color})`;
  var contrast = darkness(color) ? "#202124" : "#fdfdfd";

  if (this.checked) {
    dot.toggleClass("off on");
    dot.css("height", "0px");
    dot.css("width", "0px");
    cancel.css("color", contrast);
    cancel.toggleClass("on off");
    cancel.css("width", "12px");

    tagbox.css({
      "background-color": rgb,
      color: contrast,
      "border-color": rgb,
      color: contrast
    });
  } else {
    dot.toggleClass("off on");
    dot.css("height", "12px");
    dot.css("width", "12px");
    cancel.toggleClass("on off");
    cancel.css("width", "0px");

    tagbox.css({
      "background-color": "#fff",
      color: "",
      "border-color": ""
    });
  }
});

function darkness(color) {
  color.replace(/^\D+|\)/g, "").trim();
  //console.log(color);
  var rgb = color.split(",");
  //console.log(rgb);
  var final =
    parseInt(rgb[0], 10) + parseInt(rgb[1], 10) + parseInt(rgb[2], 10);
  //console.log(final);
  if (final < 384) {
    return false;
  }
  return true;
}

label {
  display: flex;
  align-items: center;
  font: 400 12px/16px Roboto Mono, monospace;
  letter-spacing: -0.2px;
  padding: 4px 0;
  user-select: none;
  cursor: pointer;
}

.tagboxes {
  display: flex;
  padding: 3rem;
  list-style: none;
}

.tagbox {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0.3rem;
  transition: 0.1s ease-in-out;
}

.text--tagbox {
  margin-right: 3px;
}

.cancel--tagbox {
  width: 0px;
  height: 12px;
  margin-top: -3px;
  color: purple;
  transition: width 0.25s ease;
}

.dot {
  margin-right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: all 0.25s ease;
}

dot.off {
  transform: scale(0);
}

dot.on {
  transform: scale(1);
}

.cancel--tagbox.off {
  transform: scale(0);
}

.cancel--tagbox.on {
  transform: scale(1);
}

#i1+label .dot {
  background-color: rgb(49, 231, 182);
}

#i2+label .dot {
  background-color: rgb(0, 0, 255);
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
<button id="m_clear">Clear All</button>

<div class="tagboxes">

  <div class="tagbox">
    <input id="i0" type="checkbox">
    <label data-rgb="255,64,129" for="i0">
    <mark style="background-color: rgb(255, 64, 129);" class="dot on"></mark>
    <b class='text--tagbox'>Lobster</b>
    <i class="fas fa-times cancel--tagbox off"></i>
  </label>
  </div>

  <div class="tagbox">
    <input id="i1" type="checkbox">
    <label data-rgb="49,231,182" for="i1">
    <mark class="dot on"></mark>
    <b class='text--tagbox'>Tuna</b>
    <i class="fas fa-times cancel--tagbox off"></i>
  </label>
  </div>

  <div class="tagbox">
    <input id="i2" type="checkbox">
    <label data-rgb="0,0,255" for="i2">
    <mark class="dot on"></mark>
    <b class='text--tagbox'>Pine</b>
    <i class="fas fa-times cancel--tagbox off"></i>
  </label>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.9.0/js/all.js" data-auto-replace-svg="nest"></script>

Answer 3

使用each和this，我开始使用它。请查看下面的代码。

$("#m_clear").on("click", function() {
 $("input:checked").each(function() {
    $(this).prop("checked", false);
    $(this).trigger("change");
 });
  });
$(":checkbox").on("change", function() {
  var label = $(this).next("label");
  var dot = label.find(".dot");
  var tagbox = $(this).closest(".tagbox");
  var cancel = label.find(".cancel--tagbox");
  var color = label.data("rgb");
  var rgb = `rgb(${color})`;
  var contrast = darkness(color) ? "#202124" : "#fdfdfd";

  if (this.checked) {
    dot.toggleClass("off on");
    dot.css("height", "0px");
    dot.css("width", "0px");
    cancel.css("color", contrast);
    cancel.toggleClass("on off");
    cancel.css("width", "12px");

    tagbox.css({
      "background-color": rgb,
      color: contrast,
      "border-color": rgb,
      color: contrast
    });
  } else {
    dot.toggleClass("off on");
    dot.css("height", "12px");
    dot.css("width", "12px");
    cancel.toggleClass("on off");
    cancel.css("width", "0px");

    tagbox.css({
      "background-color": "#fff",
      color: "",
      "border-color": ""
    });
  }
});

function darkness(color) {
  color.replace(/^\D+|\)/g, "").trim();
  //console.log(color);
  var rgb = color.split(",");
  //console.log(rgb);
  var final =
    parseInt(rgb[0], 10) + parseInt(rgb[1], 10) + parseInt(rgb[2], 10);
  //console.log(final);
  if (final < 384) {
    return false;
  }
  return true;
}