如何在提交前显示复选框值或在勾选时自己显示？ [关闭]

I have the following codes:

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

It will show the checked items after submit. Is this possible show the ticked items values inside a input box before submitting.

Yes, it certainly is but it will take some javascript code.

Here is an example based on the code snippet you pasted:

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>

and the javascript:

function selectionListener() {

    checkedStr = '';

    if (document.getElementById('grapefruit').checked) {
        checkedStr = checkedStr + "grapefruit is checked!
";
    }

    if (document.getElementById('pinapple').checked) {
        checkedStr = checkedStr + "pinapple is checked!
";
    }
    if (document.getElementById('apple').checked) {
        checkedStr = checkedStr + "apple is checked!
";
    }

    document.getElementById('SelectionMade').value = checkedStr;
}

The only way i can think of is to attach an event to the checkboxes and display the clicked ones on another area. Assuming you are using JQuery, the code should be something like this:

$('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
});

Load this code on document.ready and try to tweak it to suit your needs.
Of course the code needs some change, but the basic idea is this.

Full example

If you confirm it sends everything else it stops.

  1. works with unlimited checkboxes.

  2. one eventListener.

  3. compatibility: needs e.preventDefault()(first example only) and querySelectorAll()

  4. in querySelectorAll() you can also add the name of the checkbox set.

  5. Pure 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>

If you want the results in a input filed on change:

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