Question

我有一个表格，我将在下面给出一部分：

<input type="checkbox" id="yes" name="yes" value="1" />Yes

<div id="divyes">
    <div class="form-group">
        <label for="hey">Hey</label>
        <select class="form-control input-sm" id="hey" name="hey">
        </select>
    </div>
    <div class="form-group">
        <input type="text" class="form-control input-sm" id="yes2" name="yes2" />
    </div>
    <div class="form-group">
        <input type="text" class="form-control input-sm" id="yes3" name="yes3" />
    </div>
</div>

我试图根据复选框的选中状态显示或隐藏表单的某些部分。

$(function () {
    $("#divyes").hide();

    $("#yes").click(function () {

        if ($("#yes").attr("checked")) {
            $("#divyes").slideDown();
        } else {
            $("#divyes").slideUp();
            $("#divyes > input").text("");
        }
    });
});

您可以看到fiddle here

如果我从左侧面板中选择jQuery 1.8.3它可以正常工作，但如果我选择1.10.1则无法正常工作。我也在我的项目中使用1.10.2。所以我想知道如何在不使用.slideDown() / .show()和.slideUp() / .show()的情况下完成工作？换句话说，我的逻辑是好还是你能提供更好的逻辑呢？

Answer 1

使用.change()事件和this

的实例

$("#yes").change(function () {

    if (this.checked) {
        $("#divyes").slideDown();
    } else {
        $("#divyes").slideUp();
        $("#divyes > input").text("");
    }
});

失败发生在.attr方法上 - 应该.prop进行检查，但是你可以this.checked来获得更快的结果。

小提琴：http://jsfiddle.net/a3j5V/4/

Answer 2

$(function () {
  var yes_cont = $("#divyes");
  var yes_checkbox = $("#yes");
  yes_cont.hide();
  yes_checkbox.click(function () {
    if ($(this).is(':checked')) {
        yes_cont.slideToggle('up');
    }  else {
        yes_cont.slideToggle('down');
      }
  });
});

http://jsfiddle.net/rY4Ts/15/

Answer 3

我用toggle

制作了它

$('#divyes').toggle('slow');

http://jsfiddle.net/a3j5V/11/

jQuery隐藏/显示表单的某些部分

3 个答案: