Jquery 显示/隐藏复选框数据

Question

我想显示复选框信息

就像当我选中复选框时，它显示复选框的信息并隐藏其他复选框信息

其显示/隐藏复选框数据

这是我的尝试。

$('#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>

Answer 1

如果您希望使用 jQuery 来完成此操作，您应该将代码替换为：

<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>

所以现在如果您取消选中显示您的名字，您的名字“Steven”就会消失。

Answer 2

请确保您使用正确的 HTML 标签和脚本标签。这应该可以解决问题。

您导入了正确的库吗？

jquery 代码还需要位于以下标签之间：

$(document).ready(function(){

});