javascript - 使用 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" />