从选中的复选框中获取所有值，并将其放入文本区域

Getting all the value from a checked checkbox and put into a textarea

本文关键字：区域 文本 复选框 获取      更新时间：2023-09-26

我想通过javascript将我的所有复选框值放入文本区域，一旦取消选中，它就会从数组中弹出。。。这是代码：

<form enctype="multipart/form-data" method="get" id="frmMain" name="frmMain">
    <input type = "checkbox" id = "chk1" value = "CheckBox1" onclick ='checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk2" value = "CheckBox2" onclick = 'checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk3" value = "CheckBox3" onclick = 'checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk4" value = "CheckBox4" onclick = 'checkTickArea(this.id)'> 
    <input type = "checkbox" id = "chk5" value = "CheckBox5" onclick = 'checkTickArea(this.id)'>
    <textarea id= "taSignOff" style="width:180px;height:90px;font-size:20px; resize: none;" rows="3" readonly> </textarea>
</form>

javascript:

var selectedvalue=[];
function checkTickArea(id)
   {
       $('#'+id).change(function () {
           //If checked then push the value
           if( $('#'+id).is(":checked"))
           {
               selectedvalue.push($('#'+id).attr("value"));
           }else
           {
               //This is what pops the value from the array when the checkbox is unchecked.
             /*  var index = selectedvalue.indexOf($('#'+id).attr("value"));
               if (index > -1) {
                   selectedvalue.splice(index, 1);
               }*/
               selectedvalue.splice(selectedvalue.indexOf($(this).attr("value")),1);
           }
           document.getElementById('taSignOff').value = selectedvalue.join("->'n");
       });
   }

此外，此功能仅适用于firefox。。。但在Chrome和IE中，它不起作用。。。

这对我有效，尽管我不知道为什么你不在文本区域使用jQuery：jsFiddle

HTML:

<form enctype="multipart/form-data" method="get" id="frmMain" name="frmMain">
    <input type = "checkbox" id = "chk1" value = "CheckBox1" /> 
    <input type = "checkbox" id = "chk2" value = "CheckBox2" /> 
    <input type = "checkbox" id = "chk3" value = "CheckBox3" /> 
    <input type = "checkbox" id = "chk4" value = "CheckBox4" /> 
    <input type = "checkbox" id = "chk5" value = "CheckBox5" />
    <textarea id= "taSignOff" style="width:180px;height:90px;font-size:20px; resize: none;" rows="3" readonly> </textarea>
</form>

JavaScript:

var selectedvalue = [];
$('input[type="checkbox"]').on('change', checkTickArea);
function checkTickArea() {
    //If checked then push the value
    if ($(this).is(":checked")) {
        selectedvalue.push($(this).val());
    } else {
        selectedvalue.splice(selectedvalue.indexOf($(this).val()), 1);
    }
    // Why not use jQuery tho?
    //$('taSignOff').val(selectedvalue.join("->'n"));
    document.getElementById('taSignOff').value = selectedvalue.join("->'n");
}

删除内联javascript并执行：

var elems = $('[id^="chk"]');
elems.on('change', function() {
    $('#taSignOff').val(
        elems.filter(':checked').map(function() {
            return this.value;
        }).get().join("->'n")
    );
});

FIDDLE

相关文章：