在文本区域中显示复选框的值

Question

我这里有一个代码，当选中时将显示复选框的值。 我的问题是我不知道如何将所有数字加起来，当我选中一个复选框时，该数字或值会自动显示在文本区域中，而当我选中另一个复选框时，它会加到我第一个复选框中选中，当我选中另一个复选框时，它也应该从前两个复选框中累加。 我该怎么做？

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

Answer 1

如果这是您的意思，请检查此小提琴： http : //jsfiddle.net/zyfmt4at/5/

这是脚本：

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

这是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>

Answer 2

上面提出的解决方案基于以下假设：如果您需要字符串值，则复选框值为数字。 您可能会建议这一点。

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

和

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

以及工作正常的人： http ://plnkr.co/edit/HWHRsBn7s7vJ9KI4UauU

Answer 3

一些技巧：

• 不要听click事件来检测复选框的变化。 它们可以以其他方式更改，例如使用键盘。 您可以改为收听change事件。
• 不要在HTML源代码中使用事件处理程序内容属性。 使用JS添加事件监听器。
• 不要将相同的事件侦听器添加到所有事件。 委托给一个共同的祖先。
• br元素很难看。 最好使用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>