Question

嗨，我想在点击input时隐藏一些checkbox字段。

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

尝试以下内容并查看Fiddle

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

您的slider2为空，因此添加了一个简单的数据。

检查这是否是你想要的

Answer 2

尝试这样：

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

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

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

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

demo

Answer 3

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

$("#approvedToggle").buttonset();

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

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

3 个答案: