CODEWITHSUNDEEP
jquery
yarek
yarek

Reputation: 12034

How to hide labels of unchecked checkboxes?

I need to hide checkboxes and their labels when the checkboxes are not checked.

// this works for checkboxes:
//$("input:checkbox").not(":checked").hide();

// ERROR: this hides all labels
$("input:checkbox").not(":checked").parent().find('label').hide();
<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">

Upvotes: 2

Views: 1018

Answers (4)

Mohammad
Mohammad

Reputation: 21489

Use .prev() that select previus sibling of element. Also you can use :not() selecot instead .not() method. 

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


$("input:checkbox:not(:checked)").hide().prev().hide();
<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">

If label isn't previous sibling of input, you can select target label using Attribute Equals Selector [name=”value”]. As you know id of input is equal to for attribute of label.

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


$("input:checkbox:not(:checked)").each(function(){ 
    $(this).hide().siblings("label[for='"+ this.id +"']").hide();
});
<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">

Upvotes: 3

Haroldo_OK
Haroldo_OK

Reputation: 7230

You could use the id of the checkbox to aid in the filtering:

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

Or, if you want something more robust and structure-independant:

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

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

You can use this function.

With this function, it doesn't matter where the label is positioned. Only thing important is to use the id attribute on your checkbox and for attribute on your label.

$(function() {
  $('input:checkbox:not(:checked)').each(function() {
    $(this).hide();
    $('label[for='+$(this).attr('id')+']').hide();
  });
});
<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">

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

prev() : Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

You could use prev() to select the previous label by passing "label" as parameter :

$('input:checkbox:not(:checked)').hide().prev('label').hide();
<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">

Hope this helps.

Upvotes: 2

Related Questions