user1866925 user1866925 - 3 months ago 9
jQuery Question

Adding a checkbox with delete option with jQuery for an array of elements

I am new to jQuery and JS. I have been wondering how to add a checkbox for each of the elements in the array

aCurrencies
, so I can be able to delete one or many of the elements in this array. My idea is to do this with the
for loop
I already have in the method below.

I made many unsuccessful attempts to code this, so any input will be highly appreciated.

function showHideCurrencies() {
$("#lblCurrencies").empty();
if (bShown == 0) {
$("#btnShowHideCurrencies").text("HIDE CURRENCIES");
bShown = 1;
for (var i = 0; i < aCurrencies.length; i++) {
$("#lblCurrencies").append("<div>" + aCurrencies[i] + "<i data-arrayIndex='" + i + "' class='fa fa-trash-o fa-fw'></i></div>")
}
$("#lblCurrencies").show();
} else {
$("#btnShowHideCurrencies").text("SHOW CURRENCIES");
bShown = 0;
$("#lblCurrencies").hide();
}
}

Answer

I have prepared a demo code like below:

HTML:

<label id="lblCurrencies"></label>
<button id="btnShowHideCurrencies">

</button>

JQuery:

var bShown=0;
var aCurrencies=["first","second","third"];
showHideCurrencies();
function showHideCurrencies() {
    $("#lblCurrencies").empty();
    if (bShown == 0) {
        $("#btnShowHideCurrencies").text("HIDE CURRENCIES");
        bShown = 1;

        for (var i = 0; i < aCurrencies.length; i++) {
            $("#lblCurrencies").append("<div class>" + aCurrencies[i] + "<i data-arrayIndex='" + i + "' class='fa fa-trash-o fa-fw'></i><input type='checkbox' id='chk_"+i+"' /></div>")
        }
        $("#lblCurrencies").show();
    } else {
        $("#btnShowHideCurrencies").text("SHOW CURRENCIES");
        bShown = 0;
        $("#lblCurrencies").hide();
    }    

}

this code will add Checkboxes with Unique Id into your Label.

You can see demo on fiddle Click here.

Hope it helps you

Comments