CODEWITHSUNDEEP
jquery
user1866925
user1866925

Reputation: 356

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

Upvotes: 2

Views: 69

Answers (1)

Sunil Kumar
Sunil Kumar

Reputation: 3242

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

Upvotes: 1

Related Questions