Question

我正在创建一个组合框，如下所示。

在下面的jquery函数中，我想检查并比较组合框中的行数（.combobox-each）和已选择的行数（.combobox-each .checkbox-checked）以进行检查/取消选中功能。但是当我尝试打印两个div的.length时，它总是显示大数字（(".combobox-each").length结果是14，尽管div只有10）。此外，当我每次检查复选框时尝试打印(".combobox-each .checkbox-checked").length时，结果为32，这与实际检查的行数相差太远。

也许我错过了什么，我不知道。有人有想法吗？

而且，如果有人能够让我了解如何在检查/取消检查功能方面做得更好，我将非常感激！：）

$(function () {
  $("#choices").on("keyup", function () {
    $(".choices-list").show();
    var query = this.value;
    $(".combobox-value").each(function (i, elem) {
      if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) != -1) {
        $(this).show();
        $(this).parent().show();
      } 
      else {
        $(this).hide();
        $(this).parent().hide();
      }
    });
    var numOfVisibleChoices = $(".combobox-value").parent(":visible").length;
    if (numOfVisibleChoices != 0) {
      $(".choices-list").show();
    }
    else {
      $(".choices-list").hide();
    }
  });
});

var countChecked = 0;
var allCombo = (".combobox-each").length;
console.log(allCombo);

$(".combobox-select").click(function() {
  if ($(".combobox-each .checkbox-checked").length == 0) {
    $(".choices-list .checkbox").addClass("checkbox-checked");
    $(".choices-list .checkbox i").addClass("symbol-checked");
    $(this).text("Uncheck All");
  }
  else {
    $(".choices-list .checkbox").removeClass("checkbox-checked");
    $(".choices-list .checkbox i").removeClass("symbol-checked");
    $(this).text("Check All");
  }
});

$(".combobox-each").click(function() {
  $(this).find(".checkbox").toggleClass("checkbox-checked");
  $(this).find(".checkbox i").toggleClass("symbol-checked");
  countChecked = (".combobox-each .checkbox-checked").length;
  $(".combobox-label").text("Categorized Choices (" + countChecked + "/" + allCombo + ")");
  if (countChecked == allCombo) {
    $(".combobox-select").text("Uncheck All");
  }
  else {
    $(".combobox-select").text("Check All");
  }
});

.form {
  margin-bottom: 40px;
  margin: 0 auto;
  width: 768px;
  font-family: 'Open Sans', sans-serif;
}

h1 {
 font-size: 13px;
  text-transform: uppercase;
  color: #0099ff;
  margin-bottom: 24px;
}

.input-text {
  height: 34px;
  border: solid 1px #c4c4c4;
  width: 364px;
  font-size: 13px;
  padding: 0 0 0 12px;
  margin-bottom: 24px;
  color: #333;
  background-color: #fff;
  border-radius: 0;
}

::placeholder {
  color: #c4c4c4; 
}

.form-input-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.input-disabled {
  background-color: #eee; 
}

.form-unit {
  position: relative;
}

.input-select-btn {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 25px;
  left: 330px;
  text-align: center;
  line-height: 32px;
}

.on-disabled-btn {
  border: solid 1px #c4c4c4;
  background-color: #fff;
}

.input-select-btn i {
  font-size: 12px;
  color: #333;
}

.form-row {
  display: block;
  width: 100%;
  margin: 0 !important;
}

.form-divided {
  display: inline-block;
}

.form-divided-left {
  margin-right: 32px;
}

.datepicker-calendar {
  position: absolute;
}

.select2-selection {
  height: 34px !important; 
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 0 !important;
  border: solid 1px #c4c4c4 !important;
}

.select2-selection:hover,
.select2-selection:focus,
.select2-selection:active {
  box-shadow: transparent !important; 
}

.select2-results__options li {
  display: block; 
}

#choices {
  margin-bottom: 0; 
}

.choices-list {
  border: solid 1px #c4c4c4;
  padding-top: 18px;
  height: 196px;
  overflow: scroll;
  transform: translateY(-1px);
}

.choices-list input {
  position: relative;
  opacity: 0;
}

.choices-list .checkbox {
  margin: 0 16px 0 8px;
  display: inline-block;
  width: 18px;
  height: 18px;
}

.choices-list .checkbox i {
  display: none;
  margin-left: 1px;
  transform: translateY(-1px);
}

.symbol-checked {
  display: inline-block !important;
}

.checkbox-checked {
  border: solid 1px #00c983;
  margin-top: 2px;
}

.combobox-value {
  display: inline-block; 
  vertical-align: top;
  font-weight: 400;
}

.combobox-each {
  display: block; 
  margin-bottom: 8px;
}

.combobox-label-row {
  display: block;
}

.combobox-label,
.combobox-select {
  display: inline-block;
  width: 49.5%;
}

.combobox-select {
  text-align: right; 
  font-weight: 700;
  font-size: 12px;
  color: #00c983;
  cursor: pointer;
}

.combobox-select:hover {
  color: #00c983;
  text-decoration: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <div class="combobox-label-row">
        <label for="choices" class="form-input-label combobox-label">Categorized Choices (0/4)</label>
        <a class="combobox-select">Check All</a>
      </div>
      <input id="choices" class="input-text" type="text" placeholder="Search choices">
      <ul class="choices-list">
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-1" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-1">Choice ABC</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-2" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-2">Choice BCD</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-3" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-3">Choice DEF</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-4" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-4">Choice GHI</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-5" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-5">Choice IJK</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-6" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-6">Choice UVW</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-7" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-7">Choice XYZ</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-8" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-8">Choice 123</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-9" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-9">Choice 345</label>
        </li>
        <li class="combobox-each">
          <input type="checkbox" class="checkbox-input" id="choice-10" checked><span class="checkbox"><i class="fas fa-check"></i></span>
          <label class="combobox-value" for="choice-10">Choice 789</label>
        </li>
      </ul>
    </div>
  </div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

Answer 1

(".combobox-each").length;缺少前面的$以使其成为jQuery操作。就像你拥有它一样，它只是括号中的一个字符串。并且该字符串的长度为14.同样的问题适用于(".combobox-each .checkbox-checked").length;

如果您正在使用jQuery选择器，请确保不要忘记使用$。

var allCombo = $(".combobox-each").length;
$(".combobox-each .checkbox-checked").length;

使用jquery .length的意外div计数

1 个答案: