js获取checkbox勾选的值并输出，且显示长度

JavaScript

    function keypaixu() {
        var str = '';
        var strArr = [];
        var keytext = document.getElementsByName("keytext");
        for (var i = 0; i < keytext.length; i++){
             var obj = keytext[i];
             if (obj.type == "checkbox" && obj.checked) {
                var code = obj.value;//获取checkbox的值
                // str=str+code+" ";  //组合完了
                strArr.push(code);
            }

        }
        strArr = method1(strArr);
        // alert(strArr);
        for (var i = 0; i < strArr.length; i++) {
            str = str + strArr[i] + " ";
        }
        document.getElementById("textlength").innerHTML = str.length;
        document.getElementById("shengchengdi").value = str;

    }

html

<div style="float: left;">
            <div style="margin-left: 18px; height: 36px;width: 632px;background-color:#fafafa;border: solid 1px #c0c4cc;border-width: 1px 1px 0px 1px;padding-top: 5px;">
                <font style="margin-left: 10px;font-size: 15px;">关键词生成 生成长度:</font>
                <font id="textlength" style="margin-left: 10px;font-size: 15px;">0</font>
                <i id="ywsend2" class="el-icon-delete" style="float: right;margin-right: 10px;margin-top: 2.5px;font-size: 21px;" title="删除词组" onclick="deletetextyw2()"></i>
            </div>
            <textarea id="shengchengdi" style="margin-left: 18px; font-size: 15px;width: 632px;min-height: 438px;padding-left: 11px;padding-top: 11px;padding-right: 11px;border: solid 1px #c0c4cc;resize: none;"readonly="readonly"></textarea>
            
        </div>

效果

其中核心代码HTML部分

<div>

    <input type="checkbox" name='color'  value="1"/><span>红色</span>

    <input type="checkbox" name='color' value="2"/><span>绿色</span>

    <input type="checkbox" name='color' value="3"/><span>黄色</span>

    <input type="checkbox" name='color' value="4"/><span>蓝色</span>

    <input type="checkbox" name='color' value="5"/><span>紫色</span>

  </div>

  <div>

    <button type="button" onclick="getValue()">获取选中的复选框的值</button>

  </div>

  <div>

   <p id="show"></p>

  </div>

  <script>

    function getValue()

    {

      var input = document.getElementsByName("color");  //获取所有name为color的值

      var str="选中的值为:";

      for (var i = 0; i < input.length; i++){

        var obj = input[i];

        if (obj.type == "checkbox" && obj.checked) {

          var code = obj.value;//获取checkbox的值

          str=str+code+",";

        }

      }

     document.getElementById("show").innerText=str;

    }

  </script>