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

Question

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.

Answer 1

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