在页面上显示选中的复选框选项

Question

想知道我是否可以得到一些帮助。我有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来实现这一点，但我不确定如何实现这个复选框。关于如何做到这一点的任何想法？感谢您的任何建议。

Answer 1

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

    } 

而且JsFiddle

Answer 2

在这里你去。我在jQuery中写了这个，但是你可以把它转换成vanilla 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); 
});