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

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('');
        }
    });
});