отображать выбранные флажки на странице

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