如何在提交前显示复选框值,或者在勾选时显示复选框本身
How show checkbox value before submit OR there itself when ticked?
我有以下代码:
<form method="post">
<input type="checkbox" name="fruit[]" value="apple" id="apple" /><label for="apple">Apple</label><br />
<input type="checkbox" name="fruit[]" value="pinapple" id="pinapple" /><label for="pinapple">Pinapple</label><br />
<input type="checkbox" name="fruit[]" value="grapefruit" id="grapefruit" /><label for="grapefruit">Grapefruit</label><br />
<input type="submit" name="go" />
</form>
<?php
$fruitList = implode(', ', $_POST['fruit']);
echo $fruitList;
?>
提交后将显示选中的项目。在提交之前,是否可以在输入框中显示勾选的项目值。
我能想到的唯一方法是将事件附加到复选框中,并在另一个区域显示单击的事件。假设您使用的是JQuery
,代码应该是这样的:
$('input[type=checkbox]').change(function() { // Listen to change on your checkbox
var checked = '';
$.each($('input[type=checkbox]:checked'), function(k, v) { // Iterate through the checked ones
checked = checked + v + ' / '; // Append the value to a string
}
$('#display_results').html(v); // Replace the content of a div, span, whatever
});
在document.ready
上加载此代码,并尝试对其进行调整以满足您的需求
当然,代码需要一些更改,但基本思想是这样的。
是的,当然是,但需要一些javascript代码。
下面是一个基于粘贴的代码片段的示例:
http://jsfiddle.net/EmNSe/
<form method="post" name="myForm">
<input type="checkbox" name="fruit[]" value="apple" id="apple" onclick="selectionListener();" />
<label for="apple">Apple</label>
<br />
<input type="checkbox" name="fruit[]" value="pinapple" id="pinapple" onclick="selectionListener();" />
<label for="pinapple">Pinapple</label>
<br />
<input type="checkbox" name="fruit[]" value="grapefruit" id="grapefruit" onclick="selectionListener();" />
<label for="grapefruit">Grapefruit</label>
<br />
<br />
<label for="SelectionMade">Selection Made:</label>
<textarea rows="4" cols="50" name-"SelectionMade" id="SelectionMade">
</textarea>
<br />
<br />
<input type="submit" name="go" />
</form>
和javascript:
function selectionListener() {
checkedStr = '';
if (document.getElementById('grapefruit').checked) {
checkedStr = checkedStr + "grapefruit is checked!'n";
}
if (document.getElementById('pinapple').checked) {
checkedStr = checkedStr + "pinapple is checked!'n";
}
if (document.getElementById('apple').checked) {
checkedStr = checkedStr + "apple is checked!'n";
}
document.getElementById('SelectionMade').value = checkedStr;
}
完整示例
如果你确认它发送了所有其他内容,它就会停止。
-
使用无限制的复选框。
-
一个eventListener。
-
兼容性:需要
e.preventDefault()
(仅限第一个示例)和querySelectorAll()
-
在querySelectorAll()中,您还可以添加复选框集的名称。
-
纯javascript。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox</title>
<style>
</style>
<script>
(function(W){
var D;
function init(){
D=W.document;
D.getElementsByTagName('form')[0].addEventListener('submit',h,false);
}
function h(e){
var s=this.querySelectorAll('input[type=checkbox]:checked'),l=s.length,a=[];
while(l--){a[l]=s[l].value;}
confirm(a.join(', '))?null:e.preventDefault();
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<form method="post">
<input type="checkbox" name="fruit[]" value="apple" id="apple" /><label for="apple">Apple</label><br />
<input type="checkbox" name="fruit[]" value="pinapple" id="pinapple" /><label for="pinapple">Pinapple</label><br />
<input type="checkbox" name="fruit[]" value="grapefruit" id="grapefruit" /><label for="grapefruit">Grapefruit</label><br />
<input type="submit" name="go" />
</form>
</body>
</html>
如果您希望在更改时输入结果:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checkbox</title>
<style>
</style>
<script>
(function(W){
var D;
function init(){
D=W.document;
D.getElementsByTagName('form')[0].addEventListener('change',h2,false);
}
function h2(e){
var s=this.querySelectorAll('input[type=checkbox]:checked'),l=s.length,a=[];
while(l--){a[l]=s[l].value;}
D.getElementById('fruits').value=a.join(', ');
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<form method="post">
<input type="checkbox" name="fruit[]" value="apple" id="apple" /><label for="apple">Apple</label><br />
<input type="checkbox" name="fruit[]" value="pinapple" id="pinapple" /><label for="pinapple">Pinapple</label><br />
<input type="checkbox" name="fruit[]" value="grapefruit" id="grapefruit" /><label for="grapefruit">Grapefruit</label><br />
<input type="submit" name="go" />
</form>
<input id="fruits">
</body>
</html>
相关文章:
- Bootstrap使用复选框显示和隐藏id
- oncheck复选框显示主干中的数据
- AngularJS过滤器使用ng个重复复选框显示所有页面加载
- 在同一行中为每个复选框显示和隐藏文本字段
- 为每个选中的复选框显示相同的问题集.(PHP和JS/Jquery)
- 我需要有关根据复选框显示和隐藏数据的帮助
- 如何使用复选框显示表单的更多选项并更改表单的操作属性
- 将选中的复选框显示在一个部分中,未选中的复选框显示在另一个部分中
- jQuery / JavaScript 复选框显示多个和单个选择中选中的复选框的数量
- 如何根据选中的复选框显示表行
- 如何为不同的复选框显示不同的下拉列表,然后在选中多个复选框时显示不同的下拉列表
- 让复选框显示某些内容
- 根据复选框显示/隐藏表行
- 根据复选框显示文本框
- 如何使用javascript复选框显示警报消息
- JQuery过滤器复选框显示/隐藏元素
- 正在选中复选框显示名称
- 在Highcharts中使用按钮/复选框显示/隐藏数据的示例
- EXTJS复选框显示为[object object]
- 复选框显示在for循环中,如何在Javascript中获取getElementById