Question

我有一个脚本，当我选中一个复选框时，该脚本使 div可见或隐藏（效果很好）。例如：产品具有折扣 check ->显示div以输入折扣价格。

在加载详细信息页面时，将根据属性“ isAvailable”选中/取消选中该复选框。 默认情况下，它不会显示div！，除非您两次单击复选框并手动进行检查。

这是我的脚本：

   $("#DiscountCheckbox").change(function () {
            if ($(this).is(':checked')) {
                document.getElementById("percentageDiv").style.visibility = "visible";
                $("#percentageDiv").fadeIn(200);
            }
            else {
                $("#percentageDiv").fadeOut(200);
                document.getElementById("percentageDiv").style.visibility = "hidden";
            }
        });

这是html：

<div class="form-group">
  @Html.CheckBoxFor(p => p.Product.Price.IsActive, new { @class = "filled-in", id = "DiscountCheckbox" })
  <label for="DiscountCheckbox" title="Add a discount to this product">add discount</label>
</div>

<!-- div that is visible/hidden -->
<div class="form-group" id="percentageDiv">
<label class="control-label" for="txtboxCustomerRef">Discount name:</label>
@Html.TextBoxFor(p => p.Discount.DiscountName, new { placeholder = "enter discount name", @class = "form-control", id = "DiscountName", title = "Enter a name for this discount" })
</div>

我尝试将其设置为文档准备就绪，但对我没有用，也许我做的不对：

     $(function () {
        if ($("#DiscountCheckbox").is(':checked')) {
            document.getElementById("percentageDiv").style.visibility = "visible";
            $("#percentageDiv").fadeIn(200);
        }
        else {
            $("#percentageDiv").fadeOut(200);
            document.getElementById("percentageDiv").style.visibility = "hidden";
        }


    });

Answer 1

将您的代码放入$（document）.ready（）{} 以propet方式

$(document).ready(function() {
        if ($("#DiscountCheckbox").is(':checked')) {
        document.getElementById("percentageDiv").style.visibility = "visible";
        $("#percentageDiv").fadeIn(200);
    }
    else {
        $("#percentageDiv").fadeOut(200);
        document.getElementById("percentageDiv").style.visibility = "hidden";
    }});

Answer 2

这将帮助您理解

HTML

<label for="chkPassport">
    <input type="checkbox" id="chkPassport" />
    Do you have Passport?
</label>
<hr />
<div id="dvPassport" style="display: none">
    Passport Number:
    <input type="text" id="txtPassportNumber" />
</div>
<div id="AddPassport">
    Add New Password
</div>

jQuery

$(function () {
        $("#chkPassport").click(function () {
            if ($(this).is(":checked")) {
                $("#dvPassport").show();
                $("#AddPassport").hide();
            } else {
                $("#dvPassport").hide();
                $("#AddPassport").show();
            }
        });
    });

我希望它对您有用。

Answer 3

我发现了问题！

我使用的Jquery并不是问题。手动选中/取消选中该复选框可以完美地显示和隐藏（Discount）-Div。但是不是第一次加载页面时。

因此，我尝试了几种方法对准备好的文档进行检查，但这没有用。我开始深入研究我的代码，并得出以下结论：需要显示/隐藏的div是位于另一个顶部带有标签的div内。 在单击该特定选项卡时必须完成检查！我根本没有想到这一点。。以为那不是问题。

在这里您可以看到我现在使用的所有脚本：

<script>
    $("#DiscountCheckbox").change(function () {
                    if ($(this).is(':checked')) {
                        document.getElementById("percentageDiv").style.visibility = "visible";
                        $("#percentageDiv").fadeIn(200);
                    }
                    else {
                        $("#percentageDiv").fadeOut(200);
                        document.getElementById("percentageDiv").style.visibility = "hidden";
                    }
                });
            $("#tabPrices").click(function () {
                if ($("#DiscountCheckbox").is(':checked')) {
                    document.getElementById("percentageDiv").style.visibility = "visible";
                    $("#percentageDiv").fadeIn(200);
                }

                else {
                    $("#percentageDiv").fadeOut(200);
                    document.getElementById("percentageDiv").style.visibility = "hidden";
                }

            });
    </script>

选中复选框时显示/隐藏带有jQuery的div

3 个答案: