使用 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

在選項中，最好使用 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" />

Answer 4

您可以使用一些良好的做法，如下所示：

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
}

在這里閱讀更多