如何在提交之前顯示覆選框值或在打勾時顯示自身？

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

它會顯示已選中的項目提交後。這可能會在提交之前在輸入框中顯示勾號項目值。

來源

2013-08-19 user1915224

該項目旁邊的複選框。他們沒有顯示什麼問題？他們就在那裏！ –

這可能顯示在一個輸入框內，提交之前所有檢查了什麼？ – user1915224

你知道任何的JavaScript？ –

是的，它當然是，但它會採取一些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-19 17:55:31 PressingOnAlways

我能想到的唯一的辦法就是附加一個事件複選框並在另一個區域顯示點擊的複選框。假設你正在使用JQuery，代碼應該是這樣的：在document.ready

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

加載這個代碼，並嘗試調整，以滿足您的需求。
當然，代碼需要一些改變，但基本的想法是這樣的。

來源

2013-08-19 17:57:34 MurifoX

完整示例

如果確認它發送了其他所有內容，則停止。

適用於無限的複選框。
one 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>

來源

2013-08-19 18:11:31 cocco

如何在提交之前顯示覆選框值或在打勾​​時顯示自身？

回答

相關問題

如何在提交之前顯示覆選框值或在打勾時顯示自身？