Jquery show / hide checkebox data-CodePudding

i want to show checkbox information

like when i check box it shows info of checkedbox and hide other checkbox info

its show / hide checkbox data

here is my try.

$('#mycountry').change(function() {
  if ($(this).prop("checked")) {
    $('#country').show();
  } else {
    $('#name').hide();
  }
});

$('#myname').change(function() {
  if ($(this).prop("checked")) {
    $('#name').show();
  } else {
    $('#country').hide();
  }
});

<input type="checkbox" id="myname" name="myname" checked>
<label for="myname"> Show my name</label><br>
<input type="checkbox" id="mycountry" name="mycountry">
<label for="mycountry"> Show my country</label><br>

<div id="country" style="display: none">
  <span>Canada</span>
</div>

<div id="name">
  <span>Steven</span>
</div>

CodePudding user response：

If you wish to do it by using jQuery, you should replace your code with this:

<script>
  $("#mycountry").change(function () {
    if ($(this).prop("checked")) {
      $("#country").show();
    } else {
      $("#country").hide();
    }
  });

  $("#myname").change(function () {
    if ($(this).prop("checked")) {
      $("#name").show();
    } else {
      $("#name").hide();
    }
  });
</script>

So now if you uncheck to show your name, your name "Steven" will gone.

CodePudding user response：

Please ensure you are using the correct HTML tags and script tags. This should solve the problem.

Have you imported the correct libraries?

The jquery code also needs to be in between the following tags:

$(document).ready(function(){

});