-1

我有以下代码：

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

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

4

3 回答 3

1

我能想到的唯一方法是将事件附加到复选框并在另一个区域显示单击的事件。假设您使用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并尝试对其进行调整以满足您的需求。
当然代码需要一些改变，但基本思想是这样的。

于 2013-08-19T17:57:34.100 回答
0

完整示例

如果您确认它会发送其他所有内容，它将停止。

  1. 适用于无限的复选框。

  2. 一个事件监听器。

  3. 兼容性：需要e.preventDefault()（仅第一个示例）和querySelectorAll()

  4. 在 querySelectorAll() 中，您还可以添加复选框集的名称。

  5. 纯 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>
于 2013-08-19T18:11:31.637 回答
0

是的，当然可以，但需要一些 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;
}
于 2013-08-19T17:55:31.817 回答