CODEWITHSUNDEEP
jquery
peace_love
peace_love

Reputation: 6461

How can I hide the parent div of a checkbox if the checkbox is not checked?

if my checkbox with the class box is not checked I want to hide the div with the class checkbox. But not all divs with the class checkbox. Only the parent div of the unchecked checkbox. This is my try. But it hides only the box not the whole div:

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

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

I hope I explained it more or less understandable.

Upvotes: 0

Views: 858

Answers (4)

Richard Hamilton
Richard Hamilton

Reputation: 26434

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

Upvotes: 1

Amit
Amit

Reputation: 15387

Try using as 

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

});

Fiddler

Upvotes: 1

Stryner
Stryner

Reputation: 7318

One solution is to use the :has selector:

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

(Note: .hide is equivalent to setting it to display none)

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

Try this using jQuery .closest():

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

Upvotes: 3

Related Questions