HTML表单提交POST和复选框treeview值
HTML表单提交POST和复选框treeview值
提问于 2016-11-15 19:14:46
我用包含一些选项的表单创建了一个HTML页面，这些值通过POST发送到PHP页面。
HTML包含带有复选框和文本类型的常用表单输入，然后我添加了带有treeview by jQuery的复选框，但是当我单击Submit按钮时，treeview复选框的值不会随POST数据一起发送。为什么没有发送这些数据？
- 如何获得表单数据(即在POST数据中)的所有复选框值？
- 如果用户在treeview中选择父复选框，我如何使它选择所有子复选框，如果选中了部分子复选框，则父复选框将得到平方标记。
- 如果用户单击“重置表单”按钮，是否可以清除所有选中的复选框(包括treeview控件中的复选框)？
有人能解释一下哪里出了问题或如何纠正以下问题吗？
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<form class="form-horizontal" action="ConstructorMain.php" method="post">
<fieldset>
<!-- Form Name -->
<legend>Documents Generator</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="filename">File Name</label>
<div class="col-md-4">
<input id="filename" name="filename" type="text" placeholder="" class="form-control input-md" required="">
<span class="help-block">File name for the generated file</span>
</div>
</div>
<!-- Certified Or Non -->
<div class="form-group">
<label class="col-md-4 control-label" for="type">Product Type</label>
<div class="col-md-4">
<div class="radio">
<label for="type-0">
<input type="radio" name="type" id="type-0" value="cert" checked="checked"> Certified Products
</label>
</div>
<div class="radio">
<label for="type-1">
<input type="radio" name="type" id="type-1" value="non"> Non-Certified Product
</label>
</div>
<div class="radio">
<label for="type-2">
<input type="radio" name="type" id="type-2" value="full"> Universal
</label>
</div>
</div>
</div>
<!-- AV & CC -->
<div class="form-group">
<label class="col-md-4 control-label" for="avcc[]">Protection Type</label>
<div class="col-md-4">
<div class="checkbox">
<label for="avcc-0">
<input type="checkbox" name="avcc[]" id="avcc-0" value="AV"> Anti-virus
</label>
</div>
<div class="checkbox">
<label for="avcc-1">
<input type="checkbox" name="avcc[]" id="avcc-1" value="CC"> Complex Protection
</label>
</div>
</div>
</div>
<!-- Product Line -->
<div class="form-group">
<label class="col-md-4 control-label" for="ostype">Operating System Platform</label>
<div class="col-md-4">
<div id="treeview-checkbox">
<ul>
<li>DSS
<ul>
<li data-value="DSS-WIN-OS">Windows</li>
<li data-value="DSS-LINUX-OS">Linux</li>
</ul>
</li>
<li>SSS
<ul>
<li data-value="SSS-WIN-OS">Windows</li>
<li data-value="SSS-LINUX-OS">Linux</li>
</ul>
</li>
<li>GSS
<ul>
<li data-value="GSS-WIN-OS">Windows</li>
<li data-value="GSS-LINUX-OS">Windows</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="products[]">Product</label>
<div class="col-md-4">
<div class="checkbox">
<label for="products-0">
<input type="checkbox" name="products[]" id="products-0" value="DSS">DSS
</label>
</div>
<div class="checkbox">
<label for="products-1">
<input type="checkbox" name="products[]" id="products-1" value="SSS">SSS
</label>
</div>
<div class="checkbox">
<label for="products-2">
<input type="checkbox" name="products[]" id="products-2" value="MSS"> MSS
</label>
</div>
<div class="checkbox">
<label for="products-3">
<input type="checkbox" name="products[]" id="products-3" value="GSS"> GSS
</label>
</div>
<div class="checkbox">
<label for="products-4">
<input type="checkbox" name="products[]" id="products-4" value="MoSS"> MoSS
</label>
</div>
</div>
</div>
<!-- Operating System -->
<div class="form-group">
<label class="col-md-4 control-label" for="ostype">Operating System Platform</label>
<div class="col-md-4">
<select id="ostype" name="ostype" class="form-control">
<option value="win">Windows Platform</option>
<option value="linx">Linux Platform</option>
<option value="allos">Both Platform</option>
</select>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="generate">Confirm Slection</label>
<div class="col-md-8">
<button id="generate" name="generate" class="btn btn-primary">Generate File</button>
<button id="clearselection" name="clearselection" class="btn btn-inverse">Reset Selection</button>
</div>
</div>
</fieldset>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/jquery-treeview/logger.js"></script>
<script src="js/jquery-treeview/treeview.js"></script>
<script>
$('#treeview-checkbox').treeview({
debug: true,
data: ['links', 'Do WHile loop']
});
$('#show-values').on('click', function() {
$('#values').text(
$('#treeview-checkbox').treeview('selectedValues')
);
});
</script>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-15 21:26:31
我对你们三个问题中的两个作了一些更正，并给出了答案：
- 我不知道处理这个问题的最佳方法是什么，但是有一种方法是使用javascript在每个复选框上设置name属性。您可以筛选到只有值有连字符(即-)的复选框，以排除父节点(i.e.DSS、SSS、GSS)。我使用了下面的单击处理程序：
$('#generate').on('click'，function() { var复选框=$(‘#treeview-复选框inputtype=“复选框’)；Array.prototype.forEach.call(复选框，函数(复选框){ if (‘-’) -1 & checkbox.checked) {//仅包括选中的子节点checkbox.name = 'platform[]'；}}；}；
此外，数据属性似乎用于预选复选框：
$('#treeview-checkbox').treeview({ debug: true, //use this for pre-selecting items: data: ['DSS-WIN-OS'] //have the DSS > Windows checkbox checked on page load - 在treeview中可能有一些配置，或者您可以添加回调处理程序.
- 更新重置按钮上的https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type属性以使值重置
<button id="clearselection" name="clearselection" class="btn btn-inverse" type="reset">Reset Selection</button>
您可以在这个例子是柱塞中看到这一点。请注意，我将表单方法更改为GET，因为在沙箱环境中我不能有一个带有服务器端代码的页面(例如PHP)，但是表单字段的处理应该与POST技术类似-例如，在PHP中，您应该能够以数组的形式访问$_POST['platforms'] (假设提交了值)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40617924
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号