javascript convert string to array with checkbox for each array [closed]

Question

please see the jsfiddle

I want output check-box for each array.

1. how to create array?
2. how to add check-box with unique name to array?

Whatever is in the textbox, Separate words and convert to check-box

jQuery:

$(document).ready(function () {
    $(".step1_btn").click(function () {
        var text = $(".source").text();
        text = text.replace(/\W+/g, ',');
        $('.splited').html(text);
    });
});

HTML:

<textarea class="source">Jusf to clarify, I will to have strings of varying</textarea>
<button type="button" class="step1_btn">Display Date</button>
<div id="demo" class="splited"></div>

Answer 1

I believe you are trying to split the words in the textbox into separate checkboxes, this will do that:

$(".step1_btn").click(function () {

    var text = $(".source").text();
    var parts = text.split(" ");

    for (var i = 0; i < parts.length; i++) {
        var input = "<input type='checkbox' value='" + i + "'/>";
        var cbLabel = "<label>" + parts[i] + "</label>";
        $("#demo").append(input + cbLabel);
    }
});

Demo: http://jsfiddle.net/JWPZh/2/

Answer 2

You can try something like

 $(".step1_btn").click(function () {

        var text = $(".source").text();

        text = text.replace(/\W+/g, ',');

        $('.splited').html(text);

        $.each(text.split(','), function (index, value) {
            // Check if it is already added
            if (!$("#" + value).length) {
               // Dont exist add new one
               $("#demo").append("<input id=" + value +  " type='checkbox' value='"+ value+"' />" + value );
            }
        });

    });

Answer 3

I interpretted your question as follows:

1. Split the text in the textarea element using a single empty space as a delimiter.
2. Use the resultant array to create input and respective label elements.

If this is the case, then the code below should satisfy your need.

$(document).ready(function () {
    $('.step1_btn').on('click', function () {
        var counter = 0,
            fragment = document.createDocumentFragment(),
            parts = $('.source').text().split(' '),
            length = parts.length,
            input,
            label;

        for (; counter < length; counter += 1) {
             label = document.createElement('label');
             label.innerHTML = parts[counter];
             label.setAttribute('for', parts[counter]);
             input = document.createElement('input');
             input.setAttribute('type', 'checkbox');
             input.setAttribute('name', parts[counter]);
             fragment.appendChild(label);
             fragment.appendChild(input);
        }
        $(document.getElementById('demo')).append(fragment);
    });
});

fiddle

Answer 4

Perhaps this is what you're after?

var source = $(".source").text()
var array = []
$.each( source.split(/\W+/g), function(i, v){
    array.push( $("<input type=checkbox id='"+v+"' value='"+v+"'/>") )
})

array will contain an <input> element for each word in the source string