单独的复选框值以分隔文本区域

Question

<script>
var itemsAdded = Array();

function moveNumbers(text) { 
var i = itemsAdded.indexOf(text)
if ( i >= 0) { 
itemsAdded.splice(i,1);
} else {
itemsAdded.push(text);
}
document.getElementById("result1").value=itemsAdded.join(" ");

if ( i >= 0) {  

} else{
itemsAdded.push(text);
}
document.getElementById("result2").value=itemsAdded.join(" "); 
}

$(function() {
for (i=0;i<10;i++) {
console.log(i);
$("body").append("<input type='checkbox' name='add' value='" + i + "' 
  onclick='moveNumbers(this.value)'/> Checkbox" + i + "<br/>");
 }
});

</script>


<table width="95%" height="24" border="1" align="center">
<tr>
<th><h2>Selected Image 5x7</h2></th>
<tr>
<td>
<textarea rows="4" cols="70" name="add" id="result1" style="background:#B0D2D7;
width:100%;overflow:auto;resize:none"
readonly></textarea>
</td>
</tr>
<tr><tr>
<th><h2>Selected Image 6x8</h2></th>
<tr>
<td>
<textarea rows="4" cols="70" name="add" id="result2" style="background:#B0D2D7;
width:100%;overflow:auto;resize:none"
readonly></textarea>
</td></tr>
</table>

大家好，这是新手，如果很乱，我深表歉意。

我有这个工作，但是当我选中复选框时，值的确出现在文本区域中，但是文本本身遍布各处。 当未选中时，还需要复选框以从文本区域中删除文本。 任何想法都很棒！ 希望这有道理...

干杯。

Answer 1

它不必像您描述的那样凌乱。 此外，我不知道它如何为您工作，因为html的结构在当前状态下显然已损坏。

以下是一些更新的代码，我相信这等同于您尝试使用代码片段实现的功能。 演示

JS：

var itemsAdded = Array();

function moveNumbers() {
    var text = this.value;
    var i = itemsAdded.indexOf(text)
    if (i >= 0) itemsAdded.splice(i, 1);
    else itemsAdded.push(text);
    document.getElementById("result1").value = itemsAdded.join(" ");

    if (i < 0) itemsAdded.push(text);
    document.getElementById("result2").value = itemsAdded.join(" ");
}

$(function () {
    for (i = 0; i < 10; i++)
    $("<div>Checkbox" + i + "</div>").appendTo(document.body)
        .prepend($("<input type='checkbox' name='add'/>")
        .val(i).click(moveNumbers));
});

HTML：

<table width="95%" height="24" border="1" align="center">
    <tr>
      <th>
         <h2>Selected Image 5x7</h2>
      </th>
    </tr>
    <tr>
      <td>
         <textarea rows="4" cols="70" name="add" id="result1" readonly></textarea>
      </td>
    </tr>
    <tr>
      <th>
         <h2>Selected Image 6x8</h2>
      </th>
    </tr>
    <tr>
      <td>
         <textarea rows="4" cols="70" name="add" id="result2" readonly></textarea>
      </td>
    </tr>
</table>

CSS：

textarea {
    background:#B0D2D7;
    width:100%;
    overflow:auto;
    resize:none
}

Answer 2

您没有正确附加点击事件。 他们甚至不被解雇。 请参见下面的示例。 添加复选框后，附加点击事件。 你可以从该元素的值this ，如下图所示。 JS小提琴

var itemsAdded = Array();

function moveNumbers() {
    var i = itemsAdded.indexOf(this.value)
    if (i >= 0) {
        itemsAdded.splice(i, 1);
    } else {
        itemsAdded.push(this.value);
    }
    document.getElementById("result1").value = itemsAdded.join(" ");

    if (i < 0) {
        itemsAdded.push(this.value);
    }
    document.getElementById("result2").value = itemsAdded.join(" ");
}

$(function () {
    for (i = 0; i < 10; i++) {
        console.log(i);
        $("body").append("<input type='checkbox' name='add' value='" + i + "'/> Checkbox" + i + "<br/>");
    }

    $("input:checkbox").click(moveNumbers);
});

Answer 3

试试这个http://jsfiddle.net/KCmbm/2/

注意：如果您不打算使用[b]之类的特殊标签，请使用带注释的代码（但是它将替换所有出现的提供的文本）；

Javscript

var itemsAdded = Array();

function moveNumbers(text) {
    console.log(text);
    var addedText = '[b' + text + ']' + text + '[/b]';
    $('#result1').val($('#result1').val() + addedText);
    //$('#result1').val($('#result1').val() + text);

    console.log(addedText);
}

function removeText(text){
    //$('#result1').val($('#result1').val().replace(new RegExp(text, 'g'), ''));
    $('#result1').val($('#result1').val().replace('[b' + text + ']' + text + '[/b]', ''));
}

$(document).ready(function(){
    $('.chkAdd').on('change', function(){
        $(this).prop('checked') ? moveNumbers($(this).val()) : removeText($(this).val());
    });
})