Php 提交前如何显示复选框值，或勾选时如何显示复选框值？_Php_Javascript_Html

Php 提交前如何显示复选框值，或勾选时如何显示复选框值？

php javascript html

Php 提交前如何显示复选框值，或勾选时如何显示复选框值？,php,javascript,html,Php,Javascript,Html,我有以下代码： <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" /><labe

我有以下代码：

<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;
?>


苹果

苹果粉

葡萄柚

提交后将显示选中的项目。这是否可能在提交之前在输入框中显示勾选的项目值。

是的，当然可以，但需要一些javascript代码

以下是基于粘贴的代码段的示例：

我能想到的唯一方法是将事件附加到复选框，并在另一个区域显示单击的事件。假设您使用的是

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

将此代码加载到

文档中。准备好并尝试调整它以满足您的需要。

当然，代码需要一些更改，但基本思想是这样的。
完整示例
如果您确认它发送所有其他内容，它将停止
可以使用无限的复选框
一个事件监听器
兼容性：需要e.preventDefault（）
（仅第一个示例）和queryselectoral（）

在querySelectorAll（）中，还可以添加复选框集的名称
纯javascript


复选框
（功能（W）{
变量D；
函数init（）{
D=W.文件；
D.getElementsByTagName（'form'）[0].addEventListener（'submit'，h，false）；
}
职能h（e）{
var s=this.querySelectorAll（'input[type=checkbox]：checked'），l=s.length，a=[]；
而（l--）{a[l]=s[l].value；}
确认（a.join（“，”）？null:e.preventDefault（）；
}
W.addEventListener（'load'，init，false）
})（窗口）
苹果

苹果粉

葡萄柚

如果您希望在更改时将结果保存在输入字段中：
<!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>


复选框
（功能（W）{
变量D；
函数init（）{
D=W.文件；
D.getElementsByTagName（'form'）[0].addEventListener（'change'，h2，false）；
}
函数h2（e）{
var s=this.querySelectorAll（'input[type=checkbox]：checked'），l=s.length，a=[]；
而（l--）{a[l]=s[l].value；}
D.getElementById（'fruits'）.value=a.join（'，'）；
}
W.addEventListener（'load'，init，false）
})（窗口）
苹果

苹果粉

葡萄柚
项目就在复选框旁边。他们没露面有什么问题？他们就在那里！这是否可能在输入框内显示提交前所有选中的内容？您知道任何javascript吗？您需要使用javascript在加载时以及在任何复选框上更改选中状态时更新输入框的文本值。您的帖子非常混乱。
$('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
});

<!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>