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

如果未选中我的带有类

框的复选框

，我想隐藏带有类

复选框的div。但并非所有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"});

绿色
$（（“input.box:checkbox:not（：checked）”）.css（{“display”：“none”}）；

我希望我的解释或多或少可以理解
 使用jQuery尝试以下操作：

使用jQuery尝试以下操作：

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

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

（注意：相当于将其设置为显示无）
一种解决方案是使用选择器：

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

（注意：相当于将其设置为显示无）
尝试使用as

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

});

尝试使用as

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

});

@Jarla很高兴这有帮助！回答得好！另一种选择是：
$（“input.box:checkbox:not（：checked）”）.parent（）.hide（）@PeterKA谢谢！我认为你是对的
parent
在选择DOM树上的一个元素时也会起作用，但在某些情况下，我会尽量避免使用它，因为有时程序员会在
parent
&
parent
@Jarla很高兴它有帮助！回答得好！另一种选择是：
$（“input.box:checkbox:not（：checked）”）.parent（）.hide（）@PeterKA谢谢！我认为你是对的
parent
在选择DOM树上的一个元素时也会起作用，但在某些情况下，我会尽量避免使用它，因为有时程序员会在
parent
和
parent
之间产生混淆。同样有效！现在我无法决定哪一个更好solution@Jarla我将使用
.nexist
完成此任务。我喜欢
:has
提供的可读性，但是如果嵌套了
.checkbox
，它可能会导致问题！现在我无法决定哪一个更好solution@Jarla我将使用
.nexist
完成此任务。我喜欢
:has
提供的可读性，但如果嵌套了
.checkbox
，则可能会导致问题。这是一个很好的答案，但我会非常小心使用
[class=…]
，特别是如果可能存在其他类的话<建议使用code>.box
。这是一个很好的答案，但我会非常小心地使用
[class=…]
，尤其是在可能存在其他类的情况下<建议使用code>.box
。