使用Jquery列表项的复选框值

Question

如何将选中的每个value复选框的值显示为列表项？

我在下面有一个代码片段，可以将值放入textArea输入中，但现在这不能满足我的需要，我正在寻找一种方法来将输出值添加到<ul>中。

​

function checkbox() {

  var checkboxes = document.getElementsByName('checkboxLocations');
  var checkboxesChecked = [];
  // loop over them all
  for (var i = 0; i < checkboxes.length; i++) {
    // And stick the checked ones onto an array...
    if (checkboxes[i].checked) {
      checkboxesChecked.push(checkboxes[i].value);
    }
  }
  document.getElementById("show").value = checkboxesChecked;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>CB 1</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" onClick="checkbox();" />

<label>CB 2</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" onClick="checkbox();" />

<label>CB 3</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" onClick="checkbox();" />

<input type="text" id="show" name="locations">

​

Answer 1

只需获取一个ul并继续附加li即可。

​

function checkbox() {

  var checkboxes = document.getElementsByName('checkboxLocations');
  var checkboxesChecked = [];
  // loop over them all
   var liText ="";
  for (var i = 0; i < checkboxes.length; i++) {
    // And stick the checked ones onto an array...
    
    if (checkboxes[i].checked) {
      liText += "<li>"+checkboxes[i].value+"</li>";
    }
  }
  document.getElementById("show").innerHTML = liText;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>CB 1</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" onClick="checkbox();" />

<label>CB 2</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" onClick="checkbox();" />

<label>CB 3</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" onClick="checkbox();" />

<ul id="show" name="locations" />

​

Answer 2

查看以下内容：

​

function checkbox() {

  var checkboxes = document.getElementsByName('checkboxLocations');
  var checkboxesChecked = [];
  var ul=document.getElementById('show');
  ul.innerHTML='';
  // loop over them all
  for (var i = 0; i < checkboxes.length; i++) {
    // And stick the checked ones onto an array...
    if (checkboxes[i].checked) {
      ul.innerHTML+='<li>'+checkboxes[i].value+'</li>';
    }
  }  
}

<label>CB 1</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" onClick="checkbox();" />

<label>CB 2</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" onClick="checkbox();" />

<label>CB 3</label>
<input id="walk" class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" onClick="checkbox();" />

<ul id='show' name="locations"></ul>

​

Answer 3

在option中，据我们所知，最好使用jQuery来简化代码。

​

$("input:checkbox").click(function(){
  var checkedList = $("input:checkbox:checked").toArray();
  $("#show").html('')
  for(var ch of checkedList){
     $("#show").append("<li>"+ch.value+"</li>");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>CB 1</label>
<input class="radio-button" type="checkbox" name="checkboxLocations" value="Muriwai Beach" />

<label>CB 2</label>
<input  class="radio-button" type="checkbox" name="checkboxLocations" value="Bethells Sand Dunes" />

<label>CB 3</label>
<input  class="radio-button" type="checkbox" name="checkboxLocations" value="Whatipu Beach" />

<ul id="show" name="locations" />

​