Question

我创建了一个可编辑的表单，允许用户编辑他们的个人资料信息。此表单可以保存和修改，因此我需要能够在用户进行时保存更新。这工作正常。

表单很长，所以在某些部分我有使用jquery显示/隐藏的字段，具体取决于先前输入的是或否选择。这也有效，除非如果选择了一个无线电输入并在表格被重新修改时保存，则jquery再次隐藏了详细信息字段。

所以我需要的是修改以下jquery代码的一些帮助，这样如果没有选择单选按钮，则隐藏详细信息div，但如果选择并保存了Yes选项，则在重新检查表单时它将自动打开！感谢

$("#diet-details").hide();
$("input[name=diet]").click(function() {
    if ( $("#diet1").attr('checked'))
        $("#diet-details").hide();

    if ( $("#diet2").attr('checked'))
        $("#diet-details").show();
});

Answer 1

你可以将显示/隐藏条件传递给切换功能，而不是总是在开头隐藏饮食细节div，检查是否检查了diet1选项并根据它显示（或隐藏它），

$(function() {
  $('#diet-details').toggle($("#diet1").is(':checked'));

  $("input[name=diet]").click(function() {
    $('#diet-details').toggle($("#diet1").is(':checked'));
  }); 
});

Answer 2

这样做的方法是：

(function(){
    var $d1 = $("#diet1"),
        $d2 = $("#diet2"),
        $details = $("#diet-details");

    !$d2.prop('checked') && $details.hide();

    $("input[name=diet]").click(function() {
        $d1.prop('checked') && $details.hide();
        $d2.prop('checked') && $details.show();
    });
})();

Answer 3

另一种设置初始状态的方法：

function checkem() {
  if ($("#diet1").prop('checked')) $("#diet-details").hide();
  if ($("#diet2").prop('checked')) $("#diet-details").show();
}
$("input[name=diet]").click(function () {
  checkem();
});
checkem(); //sets initial state based one current

测试小提琴：http://jsfiddle.net/YqUhZ/

如果您希望它显示是否已选中NEITHER，那么：

function checkem() {
  if ($("input[name=diet]:checked").length) {
    $("#diet-details").hide();
  } else {
    $("#diet-details").show();
  }
}
$("input[name=diet]").change(function () {
  checkem();
});
checkem(); //sets initial state based one current

jquery显示和隐藏div问题

3 个答案: