javascript - Jquery:单击复选框时隐藏 slider

Question

您好，我想在单击复选框时隐藏一些输入字段。

目前 checkbox 会在点击时改变颜色，这样我就知道哪个是事件的。单击时它不会隐藏该字段。

我已经尝试了几种方法，但似乎都不起作用，所以任何帮助都会很棒。

我的 JQuery 代码:

$(function () {
    $("#approvedToggle").buttonset(function () {
        if ($('#ApproveButton').prop('checked')) {
            $("#slider2").show();
        } else {
            $("#slider2").hide();
        }
    });
});

我的 asp.net 标记

<div class="price-slider">
     <h4 class="great">Do you pay an annual renewal fee?</h4>

    <div class="col-sm-12">
        <div>
            <fieldset id="approvedToggle" class="text-center">
                <input type="radio" id="ApproveButton" checked="checked" name="radio" />
                <label id="ApproveButtonLabel" for="ApproveButton">Yes</label>
                <input type="radio" id="RejectButton" name="radio" />
                <label id="RejectButtonLabel" for="RejectButton">No</label>
            </fieldset>
        </div>
        <p class="text-center">Percentage amount</p>
        <div id="slider2"></div>
         <h2 class="text-center" style="color: red"><b>OR</b></h2>

        <p class="text-center">Fixed Amount</p>
        <input type="text" id="fixedAnnualy" placeholder="0" class="form-control" />
        <br />
    </div>
</div>

我的 CSS

#ApproveButtonLabel.ui-state-active {
    background: blue;
}
#ApproveButtonLabel.ui-state-active span.ui-button-text {
    color: White;
    font: bold
}
#RejectButtonLabel.ui-state-active {
    background: blue;
}
#RejectButtonLabel.ui-state-active span.ui-button-text {
    color: White;
    font: bold
}

Answer 1

像这样尝试:

您需要更改事件操作并需要更改 html:

<div id="slider2"></div>

你的 $("#slider2") 是空的。

$(function () {
            $("#approvedToggle input[type='radio']").click(function () {
                if ($('#ApproveButton').prop('checked')) {
                    $("#slider2").show();
                } else {
                    $("#slider2").hide();
                }
            });
        });

demo