[英]display selected checkbox options on the page
想知道我能否得到一點幫助。 我有3個復選框,並希望在每個復選框返回給用戶之前顯示文本。
<form id="extras" onchange="calculate()">
option 1<input type="checkbox" name="box" value="2000" id="snow" onchange="calculate()" checked><br>
option 2<input type="checkbox" name="box" value="500" id="water" onchange="calculate()" checked><br>
option 3<input type="checkbox" name="box" value="150" id="air" onchange="calculate()"><br><br>
</form>
所以我可以說如果您同時選擇了選項1和選項2。 我已經使用innerHTML在下拉菜單中做到了這一點,但不確定如何實現復選框。 關於我該怎么做的任何想法? 感謝您的任何建議。
HTML
<form id="extras">
<label id="lbl_1">option 1</label><input type="checkbox" name="box" value="2000" id="1" onchange="calculate()"><br>
<label id="lbl_2">option 2</label><input id="2" type="checkbox" name="box" value="500" onchange="calculate()"><br>
<label id="lbl_3">option 3</label><input type="checkbox" name="box" value="150" id="3" onchange="calculate()"><br><br>
</form>
<span id="txt"></span>
計算功能
function calculate()
{
document.getElementById("txt").innerHTML = "";
var checkBoxes = document.getElementsByName("box");
for(var i=0; i < checkBoxes.length;i++)
{
if(checkBoxes[i].checked)
{
document.getElementById("txt").innerHTML += document.getElementById("lbl_" checkBoxes[i].id).innerHTML
}
}
}
干得好。 我是用jQuery寫的,但是可以將其轉換為普通JS。
http://jsfiddle.net/P2BfF/
本質上,您需要為復選框創建標簽:
<label for='snow'>option 1</label>
然后根據選中的內容,可以顯示該元素的innerHTML。
這是我的JS:
var checkboxes = $('#extras').find('input[type=checkbox]');
checkboxes.on('click',function() {
var selected = [];
checkboxes.each(function(idx,item) {
if (item.checked)
selected.push( $('label[for="' + item.id + '"]').html() );
});
return alert(selected);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.