将复选框值分隔到单独的文本区域
Separate check box value to separate text area
<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>
大家好,这是新手,所以如果它很混乱,我深表歉意。
我有这个工作,但是当我选中这些框时,值确实出现在文本区域中,但文本本身到处都是。还需要复选框,取消选中时可从文本区域中删除文本。任何想法都会很棒!希望这是有道理的...
干杯。
它不必像你描述的那样混乱。此外,我不知道它是如何为您工作的,因为 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
}
试试这个 http://jsfiddle.net/KCmbm/2/
注意:如果您不打算使用特殊标签,例如 [b]:使用注释代码(但它将替换所有出现的提供的文本(;
贾夫文
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());
});
})
您没有正确附加单击事件。他们甚至不会被解雇。请参阅下面的示例。添加复选框后,附加点击事件。您可以从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);
});
相关文章:
- onkeyup无法动态创建多个文本区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 在文本区域POST后解码JSON
- 在文本区域中使用jQuery.text()保持换行符
- ng在下拉列表和文本区域提交
- 将文本插入光标所在的文本区域
- 离开页面导航后保留文本区域内容
- Javascript-在文本区域中断,但不在段落中中断
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 测试文本区域中的特定文本格式
- 文本编辑后,append函数不适用于文本区域
- 如何在ReactJs中链接下拉列表和文本区域
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- 使用JSON文件中的变量(字符串)填充文本区域
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 延迟高亮显示文本区域中的文本
- 将字母添加到文本区域的末尾
- TinyMCE在新添加的文本区域