Javascript 在页面上显示选中的复选框选项
我想知道我是否能得到一点帮助。我有3个复选框,希望在每个复选框返回给用户之前显示文本Javascript 在页面上显示选中的复选框选项,javascript,Javascript,我想知道我是否能得到一点帮助。我有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
<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
选项3
所以我可以说你选择了选项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>
选项1
选项2
选项3
计算函数
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
}
}
}
函数计算()
{
document.getElementById(“txt”).innerHTML=“”;
var复选框=document.getElementsByName(“框”);
对于(变量i=0;i
给你。我在jQuery中写了这个,但是您可以将它转换为vanilla JS
http://jsfiddle.net/P2BfF/
基本上,您需要为复选框创建标签:
<label for='snow'>option 1</label>
发布您的
calculate()
函数?您所说的“将每个复选框前的文本显示回用户”是什么意思?同样的问题。。。“显示”每个复选框前的文本是什么意思?只想通过显示“选项1”、“选项2”和“选项3”文本,在复选框侧面的div中显示已选择的选项。我现在几乎在那里使用戈坎的方法。只显示所选选项中的一个,我正在尝试将其实现到我已经完成的工作中。我还没有使用jquery,所以对此不太确定。谢谢,也许可以试着翻译一下=]我现在有这个工作,非常感谢。唯一的问题是它显示在同一行上,我想添加一个换行符来分隔它们。不太确定怎么做。请将相关行更改为document.getElementById(“lbl_2;”复选框[i].id).innerHTML+“”;太好了,我想那是一个我没有试着放
的地方。非常感谢你的帮助。
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);
});