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的结构在当前状态下明显被打破。

以下是一些更新的代码，我相信这相当于您尝试使用代码段实现的代码。 DEMO

<强> 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

您没有正确附加点击事件。他们甚至没有被解雇。请参阅下面的示例。添加复选框后，附加click事件。您可以从this获取元素的值，如下所示。 JS fiddle

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

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

3 个答案: