Question

我试图在选中其父复选框后，选中无序列表中的所有复选框（作为列表项）。

我查看了很多Stackoverflow页面，并尝试了许多似乎可行的方法，但并非如此。我试图弄清楚为什么一种方法有效，而另外3或4种无效。

工作：

$("#" + e + "areas").find("input[type='checkbox']").each(function () {
              this.checked = true;
             });

不起作用：

$("#" + e + "areas").find("input[type='checkbox']").prop('checked', this.checked);

$("#" + e + "areas").find("input[type='checkbox']").each(function () {
             $(this).prop('checked', this.checked);
          });

这是它存在且当前有效的功能：

function toggleAreas(e) {
      if (!$("#" + e + "areas").is(':visible')) {
          $("#" + e + "areas").css({ 'display': '', 'list-style-type': 'none' });
          $("#" + e + "areas").find("input[type='checkbox']").each(function () {
              this.checked = true;
             });
      }
      else {
         $("#" + e + "areas").css({ 'display': 'none' });
      }
    }

HTML：

<ul style="list-style-type:none;">
    <li style="list-style-type:none;">
    <input type="checkbox" value="Central" id="5dept" name="5" onclick="toggleAreas(&quot;5&quot;)">
    <label for="Central">Central</label>
        <ul id="5areas" style="list-style-type: none;">
            <li><input type="checkbox" value="Administration" id="41area" name="Administration">
                <label for="Administration">Administration</label>
            </li>
            <li><input type="checkbox" value="Contact Center" id="39area" name="Contact Center">
                <label for="Contact Center">Contact Center</label>
            </li>
            <li><input type="checkbox" value="Intake" id="38area" name="Intake">
                <label for="Intake">Intake</label>
            </li>
        </ul
    </li>
</ul>

Answer 1

实际上，当您键入$("#" + e + "areas").find("input[type='checkbox']")时，此选择器将返回DOM元素的集合，因此this不适用。因此，应采用这种方式$("#" + e + "areas").find("input[type='checkbox']").prop('checked', true/false);。

但是当您键入：

$("#" + e + "areas").find("input[type='checkbox']").each(function () {
    this.checked = true;
});

这意味着each函数会在DOM元素的每一项上进行迭代，因此为什么我们在这里获得this。

Answer 2

下面的代码不起作用，因为循环外的this.checked未定义。

  $("#" + e + "areas").find("input[type='checkbox']").prop('checked', this.checked);

这有效：

  $("#" + e + "areas").find("input[type='checkbox']").each(function () {
                 $(this).prop('checked', this.checked);
   });

循环中存在this变量，因为each()将每个循环this设置为执行$("#" + e + "areas").find("input[type='checkbox']")时获得的数组元素

设置复选框以使用.prop检查不起作用

2 个答案: