在文本区域中显示复选框的值
[英]Display value of checkbox in textarea
问题描述
I have here a code that will display the value of the checkbox when checked. 
我这里有一个代码，当选中时将显示复选框的值。 My problem is I don't know how I will add up all the numbers, that when I checked a checkbox the number or value will display automatically to the text area and when I checked another checkbox it will add up to the first checkbox that I checked and when I checked another checkbox it should also add up from the first two checkbox. 我的问题是我不知道如何将所有数字加起来，当我选中一个复选框时，该数字或值会自动显示在文本区域中，而当我选中另一个复选框时，它会加到我第一个复选框中选中，当我选中另一个复选框时，它也应该从前两个复选框中累加。 How will I do that? 我该怎么做？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function add_sub(el)
{
if (el.checked)
{
var total = el;
total.form.elements['type'].value+=el.value;
}
else
{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
</head>
<body>
<form name="form1" method=post>
<textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();"></textarea><br>
<input type="checkbox" name="mis1" id="id1" value="1" onclick="add_sub(this);"><label>1</label><br>
<input type="checkbox" name="mis2" id="id2" value="2" onclick="add_sub(this);"><label>2</label><br>
<input type="checkbox" name="mis6" id="id3" value="3" onclick="add_sub(this);"><label>3</label><br>
<input type="checkbox" name="mis6" id="id4" value="4" onclick="add_sub(this);"><label>4</label>
</form>
</body>
3 个解决方案
解决方案1
2 2015-09-13 14:54:19
Please check this fiddle if this is what you meant: http://jsfiddle.net/zyfmt4at/5/ 如果这是您的意思，请检查此小提琴： http : //jsfiddle.net/zyfmt4at/5/
this is the script: 这是脚本：
var currNum = 0;
var txtArea = document.getElementById("txtArea");
var form = document.getElementById("mainForm");
function add_sub(el){
debugger;
if (el.checked)
{
currNum += parseInt(el.value,10);
}
else
{
currNum -= parseInt(el.value,10);
}
txtArea.value = currNum;
}
form.addEventListener("click", function(ev){
if(ev.target.getAttribute("type") == "checkbox"){
add_sub(ev.target);
}
},false);
this is the HTML: 这是HTML：
<body>
<form id="mainForm" name="form1" method=post>
<textarea id="txtArea" name="type" rows="5" cols="35" onclick="this.focus();"></textarea><br>
<input type="checkbox" name="mis1" id="id1" value="1"><label>1</label><br>
<input type="checkbox" name="mis2" id="id2" value="2"><label>2</label><br>
<input type="checkbox" name="mis6" id="id3" value="3"><label>3</label><br>
<input type="checkbox" name="mis6" id="id4" value="4"><label>4</label>
</form>
</body>
解决方案2
1 2015-09-13 15:07:12
The solutions proposed above are based on an assumption that the checkbox values are numbers, in case you are in need of string values. 上面提出的解决方案基于以下假设：如果您需要字符串值，则复选框值为数字。 You may suggest this. 您可能会建议这一点。
function add_sub(el)
{
var cbs = document.getElementById('checkboxes').getElementsByTagName('input');
var textareaValue = '';
for (var i = 0, len = cbs.length; i<len; i++) {
if ( cbs[i].type === 'checkbox' && cbs[i].checked) {
textareaValue += cbs[i].value + ' ';
}
}
document.getElementById('textarea').value = textareaValue;
}
and 和
<textarea id="textarea" name="type" rows="5" cols="35" onclick="this.focus();this.select();"></textarea><br>
<div id="checkboxes">
<input type="checkbox" name="mis1" id="id1" value="1" onclick="add_sub(this);"><label>1</label><br>
<input type="checkbox" name="mis2" id="id2" value="2" onclick="add_sub(this);"><label>2</label><br>
<input type="checkbox" name="mis6" id="id3" value="3" onclick="add_sub(this);"><label>3</label><br>
<input type="checkbox" name="mis6" id="id4" value="4" onclick="add_sub(this);"><label>4</label>
</div>
And the working plunker: http://plnkr.co/edit/HWHRsBn7s7vJ9KI4UauU 以及工作正常的人： http ://plnkr.co/edit/HWHRsBn7s7vJ9KI4UauU
解决方案3
0 2015-09-13 14:57:20
Some tips: 一些技巧：
- Don't listen to
clickevents to detect changes in checboxes.不要听click事件来检测复选框的变化。 They can change in other ways, eg with the keyboard.它们可以以其他方式更改，例如使用键盘。 You can listen to changeevents instead.您可以改为收听change事件。 - Don't use event handler content attributes in the HTML source. 不要在HTML源代码中使用事件处理程序内容属性。 Add event listeners using JS. 使用JS添加事件监听器。
- Don't add the same event listener to all events. 不要将相同的事件侦听器添加到所有事件。 Delegate it to a common ancestor instead. 委托给一个共同的祖先。
-
brelements are ugly.br元素很难看。 Better usedisplay: block.最好使用display: block。
var sum = 0, form = document.forms.form1, text = form1.elements.type; text.addEventListener('focus', text.select.bind(text)); form.addEventListener('change', function(e) { if(e.target.type == 'checkbox') { sum += e.target.value * (e.target.checked ? 1 : -1); text.value = sum; } });
label { display: block; }
<form name="form1" method="post"> <textarea name="type" rows="5" cols="35">0</textarea> <label><input type="checkbox" name="mis1" id="id1" value="1">1</label> <label><input type="checkbox" name="mis2" id="id2" value="2">2</label> <label><input type="checkbox" name="mis6" id="id3" value="3">3</label> <label><input type="checkbox" name="mis6" id="id4" value="4">4</label> </form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.