Question

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

我在下面有一个片段，将值放入textArea输入中，但现在这不符合我的需要，我希望找到一种方法将输出值添加到<ul>。

＆＃13;

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

＆＃13;

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

＆＃13;

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

尝试以下方法：

＆＃13;

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;

  var items = checkboxesChecked;
  $('ul.mylist').empty();
  var cList = $('ul.mylist')
  $.each(items, function(i){
      var text = items[i];
      $('<li/>'+text+'</li>')
      .attr('value', text)
      .appendTo(cList);
  });

}

＆＃13;

<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">

<ul class="mylist"></ul>

＆＃13;

Answer 4

在选项中，最好根据我们的知识使用jQuery来简化代码。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 5

您可以使用以下一些良好做法：

function checkbox() {
    var locations = document.querySelectorAll('.js-locations'); // using querySelector is more flexible and more clear
    var fragment = document.createDocumentFragment(); // create a fragment for performance reasons
    var items = locations.map(function (loc) { // for any loop over arrays you may prefer to use the .map method
        const li = document.createElement('li'); // it's preferable to create the nodes and append them later
        li.textContent = loc; // or .innerHTML
        fragment.appendChild(li);
    }
    var ul = document.createElement('ul');
    document.body.appendChild(fragment); // or your target output element
}

了解更多here

Checkbox Value to List item with Jquery

5 个答案: