Question

显然我做错了什么。我有一个简单的表单，用一堆选择的变量（输入字段值）重新加载页面。现在，我喜欢隐藏和显示基于复选框的输入字段之一。此输入字段位于span元素内，因此我只隐藏/显示span元素

我有这部分工作

 // Show/Hide div span
  $('#showDiv').click(function () {
    $("#element_span_with_input_field").toggle(this.checked);
     if (!$('#element_span_with_input_field').is(":visible")) {
         alert("empty input field");
        $('#inputfield').val('');
      }
 });

现在使用简单的php $ _REQUEST，我可以检查复选框是否已选中=已选中

<input <?php if (isset($_REQUEST['showDiv']) && ($_REQUEST['showDiv'] == '1')) echo 'checked="checked"'; ?> type="checkbox" value="1" name="showDiv" id="showDiv"  />Show Div

并且复选框有效。

现在我认为这应该可以设置显示/隐藏准备好的div

if ($("#showDiv").val() == '1') {
    $('#element_span_with_input_field').show();
    //$('#element_span_with_input_field').css({ visibility: "visible"});//also tried
  } else {
    $('#element_span_with_input_field').hide();
 }

我的问题：当我取消选中showDiv复选框时，当我提交表单时，div变为可见（并且showDiv变量甚至没有设置？）

Answer 1

要在DOM准备期间检查是否预先选中了复选框（基于checked="checked"属性的PHP设置），您将查找is checked设置：

$(document).ready(function() {
    if ($("#showDiv").is(':checked')) {
        $('#element_span_with_input_field').show();
    } else {
        $('#element_span_with_input_field').hide();
    }
});

正如您所说，其余代码应该可以解决。请注意，如果未选中checkbox，则$_POST或$_REQUEST中的名称将不会有变量。确实，如果它不存在（或empty），请考虑它false。

作为旁注，你可能想稍微调整另一个块：

$(document).ready(function() {
    $('#showDiv').click(function () {
        $("#element_span_with_input_field").toggle($(this).is(":checked")); // use jquery
        if (!$(this).is(":checked")) { // eval the checkbox state instead
            $('#inputfield').val('');
        }
    });
});

表单提交显示/隐藏div +输入字段基于复选框？

1 个答案: