Javascript 选中单击父项时选中的所有复选框复选框

我有Parent1和复选框当我单击Parent1复选框时，所有子项都属于Parent1，应选中Parent1以及复选框应淡出，如果我取消选中任何一个子项，则Parent1以及复选框应重新出现，并且父项和子项值来自数据库，并且它们分别位于其中循环，即每个循环的子循环中每个循环的第一个父循环

我的密码在里面

+父母1

-儿童1.1
-儿童1.2
-儿童1.3


+父母2

-儿童2.1
-儿童2.2
-儿童2.3


+父母3

-儿童3.1
-子3.2
-儿童3.3

---

提前感谢

您可以使用以下内容：

$('[type="checkbox"][name="parent"]').click(function(){
    $(this).parent().next('ul').find('li input').prop('checked',this.checked);
});

---

这里的基本逻辑是找到父复选框（在这种情况下，它们有类

pcbox

）并将更改处理程序挂接到它

然后，您可以在与更改的父复选框相同的li中找到其他子复选框元素，并将其checked属性设置为与父复选框状态相同

//dom ready handler
jQuery(function () {
    //change handler for parent checkboxes
    $('.pc-box').change(function () {
        //update the checked status of all child checkeboxes in the same li
        $(this).closest('li').find('ul input').prop('checked', this.checked)
    })
})

演示：

• -使用类查找父复选框
• -查找更改的

  li

  所属的

  li

• -在相同的

  li中查找子复选框

• -更改选中的属性

“当我单击Parent1复选框时，所有属于Parent1的子项都应选中，Parent1及其复选框应淡出，如果我取消选中任何一个子项，Parent1及其复选框应重新出现”

以下是一种方法：

$(document).ready(function() {        
    $(".pc-box").click(function() {
        if (this.checked) {
            $(this).closest("li").find(".cc-box").prop("checked", true);
            $(this).parent().fadeOut();
        }  
    });
    $(".cc-box").click(function() {
        if (!this.checked)
            $(this).closest("ul").prev().fadeIn().find(".pc-box").prop("checked", false);
    });
});

演示：

“并且父值和子值来自数据库，它们位于每个循环中”

我不明白这些信息与你所问的有什么关系，所以我将继续忽略它

我使用的所有jQuery方法的文档都可以在上找到

---

你的家庭作业：查找我代码中使用的每个jQuery方法。做一些。

尝试一下这项工作，很好：

$('[type="checkbox"][name="parent"]').on("click", function() {
  var all = $(this);
  $('input:checkbox').each(function() {
       $(this).prop("checked", all.prop("checked"));
  });
});

---

啊。你不能自己编写代码吗？你能在jsfiddle中看到plz吗？你根本没有jQuery。请尝试一下。你能告诉我如何使用jQuery吗？你有没有尝试过使用jQuery的任何东西-从jQuery开始使用，不客气-如果你做了我分配给你的作业。当我单独选中所有子复选框时，父复选框不会被选中，并且不会完全消失。因为这是一个问题中没有说明的要求，所以我的代码中不允许这样做。可以说，这是你最初的问题所暗示的，或者至少是你问题的下一个合乎逻辑的步骤，但由于你没有明确说明，我决定不花时间编写它。还有，对不起，我现在没时间做。你为什么不从我给你的代码开始，试着去理解它，然后自己添加进去呢。StackOverflow不是麦当劳的免下车窗口，你可以在那里点任何你想要的东西；我们在这里帮助您解决问题，而不是为您完成所有工作。请注意，您不需要

.each（）

循环

$（'input:checkbox'）.prop（“checked”），all.prop（“checked”）

将具有相同的效果，因为jQuery在内部循环。

$('[type="checkbox"][name="parent"]').on("click", function() {
  var all = $(this);
  $('input:checkbox').each(function() {
       $(this).prop("checked", all.prop("checked"));
  });
});