Question

在我的尝试中，我不确定我做错了什么（请参阅下面的代码段）。如果选中相关的复选框，我只是想显示一个div。我尝试了is和prop方法，但似乎都没有。

任何人都知道我做错了什么？

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>

Answer 1

你需要的是复选框上的onchange事件，因为如果你不放它，你的代码最初只会执行一次，因此最初不会检查复选框，因此不会取得成功。

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

Answer 2

您必须将条件置于change()事件中，如：

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

注意：您应添加else语句以隐藏uncheck案例中的div。

希望这有帮助。

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

您还可以使用jQuery函数.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>

Answer 3

只需绑定一个on change事件。

＆＃13;

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

＆＃13;

Answer 4

听起来您希望在选中此框时显示div 。是对的吗？您需要为[item.lstrip("$") for item in root.xpath("//td//text()")]事件添加处理程序。

change

Answer 5

好吧，当复选框实际发生变化时，您需要一些事件。该页面不会经常针对DOM重新评估您的JS - 也就是说，使用$('#package1').on('change', function(e){ if ($('#package1').prop("checked")) { $('#pg-selection').show(); } }); $('#package2').on('change', function(e){ if ($('#package2').prop("checked")) { $('#tp-selection').show(); } });事件：

（并使用change属性使代码更通用）

data-*

JS：

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

演示：https://jsfiddle.net/a5wh7ogc/1/

检查复选框是否已选中/是，然后显示div

5 个答案: