Question

在以下SSCCE中，我有三个标题为Starks，Lannisters和Targaryens的标签。然后我有一个包含几个复选框和一个标有Save的按钮的表单。提交此表单时，我希望提交以下信息：

所选/有效标签的标题
所选/选中复选框的标签

对于2，我在表单中添加了<input type="checkbox" name="columnHeadersToDisplay" value="STRING-LABEL-OF-THIS-CHECKBOX" />个元素。

对于1，我为JS中的Save按钮编写了一个点击处理程序，其中我添加了隐藏 input字段在表单内部，给它一个活动的tab-title-of-tab的值。

问题是，当我查看几个复选框时，还要激活/打开Lannisters标签并按下Save按钮（以便提交表单）然后我打印出来$_POST的内容，我得到：

Array ( [activeTabTitle] => Starks )

我需要的和我期待的（当我检查前两个复选框时）是

Array ( [activeTabTitle] => Lannisters, [columnHeadersToDisplay] => Array ( [0] => Apes, [1] => Himalayas, [2] => Malaysia ) )

问题是，为什么我没有获得活动标签的标题，为什么有关已选中复选框的信息未被发布/提交？

我做错了什么？

<?php 
$columnNames = array('Apes', 'Himalayas', 'Malaysia', 'Asia', 'Britian', 'Austria', 'Norway', 'Greece', 'Thailand', 'Maldives');


if ( isset($_POST) ) {

    print_r($_POST);//check


} else {
    echo 'isset($_POST["columnHeadersToDisplay"]) returns false.';
}


?>

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="material.min.css" />
<script type="text/javascript" src="material.min.js"></script>
<script src="jquery.min.js"></script>
<script src="scripts.js"></script>
</head>


<body>

<div class="mdl-layout mdl-js-layout">

<div class="mdl-tabs mdl-js-tabs">
    <div class="mdl-tabs__tab-bar">
        <a href="#starks-panel" class="mdl-tabs__tab is-active" id="starks-tab">Starks</a>
        <a href="#lannisters-panel" class="mdl-tabs__tab" id="lannisters-tab">Lannisters</a>
        <a href="#targaryens-panel" class="mdl-tabs__tab" id="targaryens-tab">Targaryens</a>
    </div>

    <div class="mdl-tabs__panel is-active" id="starks-panel" style="width:1000px; height:100px; background-color:wheat;">
        .
    </div>

    <div class="mdl-tabs__panel" id="lannisters-panel" style="width:1000px; height:100px; background-color:orange;">
        .
    </div>

    <div class="mdl-tabs__panel" id="targaryens-panel" style="width:1000px; height:100px; background-color:green;">
        .
    </div>
</div>

<form method="post" action="" id="chooseColumnsForm" >

<?php 
echo "<button type='button' id='submit-form-button' style='padding:15px;'>Save</button>";

foreach ($columnNames as $index=>$columnName) {
    echo "<div>
        <input type='checkbox' name='columnHeadersToDisplay[]' value='$columnName' />
        <label>$columnName</label>
    </div>";
}


?>

</form>

</div>

</body>
</html>

scripts.js中：

$(document).ready(function() {

    $("#submit-form-button").click(function(event) {
        alert('$("#submit-form-button") clicked');//check
        //alert(  $("#chooseColumnsForm").html()  );//check

        var innerHTMLOfActiveTabAnchor = $(".mdl-tabs__tab, .is-active").html();

        $("#chooseColumnsForm").html(  "<input type='hidden' name='activeTabTitle' value='"+innerHTMLOfActiveTabAnchor+"' />" + $("#chooseColumnsForm").html()  );

        alert(  $("#chooseColumnsForm").html()  );//check

        $("#chooseColumnsForm").submit();

    });

});

Answer 1

问题是检查状态没有存储在html中，它是 dom元素的属性。

已检查属性未通过用户交互进行更新，仅供浏览器用于在初始呈现期间设置已检查属性

其他属性（例如value或selected

）也是如此

使用append()或prepend()仅添加隐藏的输入，而不是替换表单的整个内部html

更改

$("#chooseColumnsForm").html('<input.....>'  + $("#chooseColumnsForm").html())

到

$("#chooseColumnsForm").append('<input.....>')

这将保留所有其他表单元素，不会影响checked属性（或其他类型控件的值）

Answer 2

要访问选中的复选框值，请使用数组作为“name”属性。像这样：

<input type="checkbox" name="columnHeadersToDisplay[]" value="STRING-LABEL-OF-THIS-CHECKBOX" />

使用POST提交表单，没有发布/提交有关CHECKED复选框的信息

2 个答案: