CODEWITHSUNDEEP
javascriptjquerycheckbox
Paul
Paul

Reputation: 3368

Checking if checkbox is checked/true and then showing a div

I am not sure what I am doing wrong (see snippet below) in my attempt. I am simply trying to show a div if the associated checkbox is checked. I have tried the is and prop method, but none seem to work.

Anyone see what it is I am doing wrong?

Fiddle

if ($('#package1').prop("checked")) {
  $('#pg-selection').show();
}
if ($('#package2').is(":checked")) {
  $('#tp-selection').show();
}
.package-setup {
  display: none;
}
<input type="checkbox" class="product-check" id="package1" value="">
<input type="checkbox" class="product-check" id="package2" value="">
<div class="package-setup-section">
  Section 2
  <div id="pg-selection" class="package-setup">Package 1</div>
  <div id="tp-selection" class="package-setup">Package 2</div>
</div>

Upvotes: 1

Views: 610

Answers (5)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You've to put your condition inside the change() event like : 

$('#package1, #package2').on('change', function(){
    //Your code here
})

NOTE : You should add else statement to hide the div in the uncheck case.

Hope this helps.

$('#package1, #package2').on('change', function(){
  if ($('#package1').prop("checked")) {
    $('#pg-selection').show();
  }else{
    $('#pg-selection').hide();
  }

  if ($('#package2').is(":checked")) {
    $('#tp-selection').show();
  }else{
    $('#tp-selection').hide();
  }
})
.package-setup {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="product-check" id="package1" value="">
<input type="checkbox" class="product-check" id="package2" value="">
<div class="package-setup-section">
  Section 2
  <div id="pg-selection" class="package-setup">Package 1</div>
  <div id="tp-selection" class="package-setup">Package 2</div>
</div>

You could also use the jQuery function .toggle() :

$('#package1, #package2').on('change', function(){
  $('#tp-selection').toggle( $('#package1').is(":checked") );
  $('#pg-selection').toggle( $('#package2').is(":checked") );
})
.package-setup {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="product-check" id="package1" value="">
<input type="checkbox" class="product-check" id="package2" value="">
<div class="package-setup-section">
  Section 2
  <div id="pg-selection" class="package-setup">Package 1</div>
  <div id="tp-selection" class="package-setup">Package 2</div>
</div>

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281696

What you need is an onchange event on the checkboxes because if you dont put it your code will be executed only once initially and hence wont give a success ever since the checkbox is initially not checked.

$('#package1').on('change', function() {
  if ($('#package1').prop("checked") ) {
    $('#pg-selection').show();
  } else {
    $('#pg-selection').hide();
  }
})


$('#package2').on('change', function() {
  if ($('#package2').prop("checked") ) {
    $('#tp-selection').show();
  } else {
    $('#tp-selection').hide()
  }
})
.package-setup {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="product-check" id="package1" value="">
<input type="checkbox" class="product-check" id="package2" value="">
<div class="package-setup-section">
  Section 2
  <div id="pg-selection" class="package-setup">Package 1</div>
  <div id="tp-selection" class="package-setup">Package 2</div>
</div>

Upvotes: 4

tymeJV
tymeJV

Reputation: 104775

Well, the you need some events for when the checkboxes actually change. The page doesn't constantly re-evaluated your JS against the DOM - that being said, use a change event:

(and use data-* attributes to make the code more generic)

<input type="checkbox" data-target="#pg-selection" class="product-check" id="package1" value="">
<input type="checkbox" data-target="#tp-selection" class="product-check" id="package2" value="">

JS:

$(".product-check").change(function() {
    $($(this).data("target")).toggle(this.checked);
});

Demo: https://jsfiddle.net/a5wh7ogc/1/

Upvotes: 0

Matt Spinks
Matt Spinks

Reputation: 6698

It sounds like you want to show the div when the box is checked. Is that right? You'll need to add a handler for the change event.

$('#package1').on('change', function(e){
  if ($('#package1').prop("checked")) {
    $('#pg-selection').show();
  }
});
$('#package2').on('change', function(e){
  if ($('#package2').prop("checked")) {
    $('#tp-selection').show();
  }
});

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Just bind an on change event.

<!DOCTYPE html>
<html lang="en-US">

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
    function CheckVisibility(){
        if ($('#package1').prop("checked")) {
            $('#pg-selection').show();
        }
        else {
            $('#pg-selection').hide();
        }
        if ($('#package2').is(":checked")) {
            $('#tp-selection').show();
        }
        else {
            $('#tp-selection').hide();
        }
    }
</script>
<style>
    .package-setup {
        display: none;
    }
</style>
</head>

<body>
<input type="checkbox" class="product-check" id="package1" onchange="CheckVisibility()" value="">
<input type="checkbox" class="product-check" id="package2" onchange="CheckVisibility()" value="">
<div class="package-setup-section">
    Section 2
    <div id="pg-selection" class="package-setup">Package 1</div>
    <div id="tp-selection" class="package-setup">Package 2</div>
</div>
</body>

</html>

Upvotes: 1

Related Questions