0

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

该表单很长，因此在某些部分中，我有使用 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();
});
4

3 回答 3

1

您可以将显示/隐藏条件传递给切换功能，而不是总是在开始时隐藏饮食详细信息 div，而是检查是否选中了diet1 选项并基于此显示（或隐藏它）， 

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

  $("input[name=diet]").click(function() {
    $('#diet-details').toggle($("#diet1").is(':checked'));
  }); 
});
于 2013-01-10T16:24:02.050 回答
0

一种方法是：

(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();
    });
})();
于 2013-01-10T16:25:30.163 回答
0

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

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/

如果您希望它显示是否未选中，则：

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
于 2013-01-10T16:29:08.587 回答