如果未选中复选框，如何隐藏复选框的父div？

Question

如果未选中我的box类复选框，我想隐藏类checkbox的div。但并非所有具有班级checkbox的div。只有未选中复选框的父div。这是我的尝试。但它只隐藏了盒子而不是整个div：

<div class="checkbox"><input class="box" type="checkbox" name="green" value="green">green</div>

  $("input.box:checkbox:not(:checked)").css({"display": "none"});

我希望我解释它或多或少可以理解。

Answer 1

使用jQuery .closest()：

尝试此操作

$("input.box:checkbox:not(:checked)").closest('.checkbox').hide();

Answer 2

一种解决方案是使用:has选择器：

$(".checkbox:has(input.box:checkbox:not(:checked))").hide();

（注意：.hide相当于将其设置为显示无）

Answer 3

尝试使用

$(function(){
  $('input[class="box"][type="checkbox"]').not(":checked").parent().css({"display": "none"});

});

Fiddler

Answer 4

$("input:checkbox").not(":checked").closest('.checkbox').hide();