javascript将字符串转换为带有每个数组复选框的数组[关闭]答案

【问题标题】：javascript convert string to array with checkbox for each array [closed]javascript将字符串转换为带有每个数组复选框的数组[关闭]
【发布时间】：2013-07-19 13:55:56
【问题描述】：

请查看jsfiddle

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

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

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

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>

【问题讨论】：

您遇到了什么错误？
“如何创建数组？” - 你还没有告诉我们你想在数组中放入什么数据。
@taylorc93 不是错误。我不知道怎么写。
@nnnnnn 文本区域中的任何内容。单独的单词

标签： javascript jquery arrays checkbox

【解决方案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/

【讨论】：

【解决方案2】：

你可以试试

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

    });

【讨论】：

【解决方案3】：

我将您的问题解释如下：

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

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

$(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

【讨论】：

【解决方案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> 元素

【讨论】：