首页 文章

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

提问于
浏览 次
1

显然我做错了什么 . 我有一个简单的表单，用一堆选择的变量（输入字段值）重新加载页面 . 现在，我喜欢隐藏和显示基于复选框的输入字段之一 . 此输入字段位于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变量甚至没有设置？）

php jquery

1 回答

  • 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('');
        }
    });
});
    回复于

相关问题