Javascript:创建循环以连接选中复选框的结果

Javascript: Create loop to concatinate results from checked checkboxes

本文关键字：复选框 结果 连接 创建 循环 Javascript      更新时间：2023-09-26

我一整天都在尝试这样做 - 并且也搜索了。

我有 html 表单中的复选框。如果选中它们，我需要立即连接并将值显示到单独的文本区域中。我的函数当前有效，但我需要创建一个循环，因为我无法确定复选框的数量，因为它们是动态的。

我的函数如下。

<script type="text/javascript">     
            function combGenderSeekingGender() {
                if (document.jomsForm.jsgenderseekinggender1.checked){
                    alert("input1 is checked");
                    var input1 = document.jomsForm.jsgenderseekinggender1.value;
                }else{
                    alert("input1 is NOT checked");
                    var input1 = "";
                }

                if (document.jomsForm.jsgenderseekinggender2.checked){
                    alert("input2 is checked");
                    var input2 = document.jomsForm.jsgenderseekinggender2.value;
                }else{
                    alert("input2 is NOT checked");
                    var input2 = "";
                }
                if (document.jomsForm.jsgenderseekinggender3.checked){
                    alert("input3 is checked");
                    var input3 = document.jomsForm.jsgenderseekinggender3.value;
                }else{
                    alert("input3 is NOT checked");
                    var input3 = "";
                }
                if (document.jomsForm.jsgenderseekinggender4.checked){
                    alert("input4 is checked");
                    var input4 = document.jomsForm.jsgenderseekinggender4.value;
                }else{
                    alert("input4 is NOT checked");
                    var input4 = "";
                }
                var tmpInput =input1 + "-" + input2 + "-" + input3 + "-" + input4;  
                document.jomsForm.jsgenderseekinggender.value = tmpInput.replace(/^['s-]+|['s-]+$/g,"");                    
            }
        </script>

此函数在循环中调用，该循环动态创建我的复选框，如下所示：

  $html .= '<input type="checkbox" onClick="combGenderSeekingGender()" id="jsgenderseekinggender'.$elementCnt.'" name="jsgenderseekinggender'.$elementCnt.'" value="'.$genderseekinggenderItem.'"/>';

一切正常，但我需要删除硬编码的 js 功能并创建一个纯循环。我能够将 elementCount 传递给有助于设置限制的函数，但我似乎无法让循环的其余部分解决，因为我似乎可以定义动态变量名称。

我基本上一直在尝试这个的变体：

function combGenderSeekingGender(numResults) {
                    var input=[];
                    for (ii=1;ii<=numResults;ii++){
                        if (document.jomsForm.jsgenderseekinggender[ii].checked){
                            alert("input"+ii+" is checked");
                            var input[ii] = document.jomsForm.jsgenderseekinggender[ii].value;
                        }else{
                            alert("input"+ii+" is NOT checked");
                            var input[ii] = "";
                        }
                    }

                    var tmpInput =input1 + "-" + input2 + "-" + input3 + "-" + input4;  
                    document.jomsForm.jsgenderseekinggender.value = tmpInput.replace(/^['s-]+|['s-]+$/g,"");                    
                }

当然，这比其他任何东西都更像是伪代码，因为我知道这不是正确的编码方式。 任何获得正确语法的建议将不胜感激。

你应该

使用 jquery：

var result = "";
$("input:checked" ).each(function(){
    result = result + "-" + $(this).val();
});

这将循环遍历所有选定的复选框，并将其值连接成 result。

相关文章：