Jquery:单击复选框时隐藏滑块

Jquery: hide slider when checkbox is clicked

本文关键字：隐藏 复选框 单击 Jquery      更新时间：2023-09-26

嗨，当单击checkbox时，我正试图隐藏一些input字段。

目前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
}

这样尝试：

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

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

您的$("#slider2")为空。

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

演示

试试下面的东西，看看Fiddle

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

您的幻灯片2为空，因此添加了一个简单的数据。

检查这是否是您想要的

这对我很有效。将事件与调用按钮集分开绑定

$("#approvedToggle").buttonset();
           $("#approvedToggle").change(function () {
              if ($('#ApproveButton').prop('checked')) {
                  $("#slider2").show();
              } else {
                  $("#slider2").hide();
              }
           });
相关文章：