javascript - javascript将字符串转换为数组，每个数组都有复选框

Question

请看jsfiddle

我想要每个数组的输出复选框。

1. 如何创建数组？
2. 如何将具有唯一名称的复选框添加到数组？

文本框中的任何内容，分隔单词并转换为复选框

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

我相信您正在尝试将文本框中的单词拆分为单独的复选框，这将做到这一点：

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

演示：http: //jsfiddle.net/JWPZh/2/

Answer 2

我将您的问题解释如下：

1. 使用单个空格作为分隔符拆分 textarea 元素中的文本。
2. 使用结果数组创建输入和相应的标签元素。

如果是这种情况，那么下面的代码应该可以满足您的需求。

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

小提琴

Answer 3

你可以尝试类似的东西

 $(".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 4

也许这就是你所追求的？

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

array将包含<input>源字符串中每个单词的元素