Question

如果未选中复选框，我需要隐藏复选框及其标签。

＆＃13;

// this works for checkboxes:
//$("input:checkbox").not(":checked").hide();

// ERROR: this hides all labels
$("input:checkbox").not(":checked").parent().find('label').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label> 

<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
    
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label> 
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
    
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label> 
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

＆＃13;

Answer 1

使用.prev()选择元素的previus兄弟。您也可以使用:not() selecot代替.not()方法。

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label>
<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label>
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label>
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

＆＃13;

如果label不是input的上一个兄弟，则可以使用Attribute Equals Selector [name=”value”]选择目标标签。如您所知，输入的id等于标签的for属性。

$("input:checkbox:not(:checked)").each(function(){
    $(this).hide().siblings("label[for='"+ this.id +"']").hide();
});

＆＃13;

$("input:checkbox:not(:checked)").each(function(){ 
    $(this).hide().siblings("label[for='"+ this.id +"']").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label>
<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label>
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label>
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

＆＃13;

Answer 2

prev（）：获取匹配元素集中每个元素的前一个兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索前一个兄弟。

您可以使用 prev() 通过将label作为参数来选择之前的"label"：

＆＃13;

$('input:checkbox:not(:checked)').hide().prev('label').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label> <input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label> <input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label> <input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

＆＃13;

希望这有帮助。

Answer 3

您可以使用此功能。

使用此功能，标签所在的位置并不重要。唯一重要的是使用复选框上的id属性和标签上的for属性。

＆＃13;

$(function() {
  $('input:checkbox:not(:checked)').each(function() {
    $(this).hide();
    $('label[for='+$(this).attr('id')+']').hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label>
<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label>
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label>
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

＆＃13;

Answer 4

您可以使用复选框的ID来帮助过滤：

$('input:checkbox').not(':checked').each(function(i, el){ 
    $(el).parent().find('label[for="' + el.id + '"]').hide(); 
});

或者，如果你想要更强大和结构独立的东西：

$('input:checkbox').not(':checked').each(function(i, el){ 
    $('label[for="' + el.id + '"]').hide(); 
});

如何隐藏未选中复选框的标签？

4 个答案: