Question

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

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

无论文本框中是什么，单独的单词并转换为复选框

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

您可以尝试类似

的内容

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

我将您的问题解释如下：

使用一个空格作为分隔符拆分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

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>元素

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

4 个答案: