ASP.NET MVC 5 Javascript：将复选框名称列表转换为隐藏字段的字符串

我花了几天时间试图找到一种方法，将绑定到复选框的操作系统字典转换为隐藏字段上的分号分隔字符串，因为这就是它们在数据库中的存储方式

我的部分观点是这样的，减去一些与这个问题无关的因素：

using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
    foreach (var os in Model.OperatingSystems)
    {
        @Html.CheckBoxFor(model => model.OperatingSystems.First(x => x.Key == os.Key).Value, new { @style = "margin-left: 10px; margin-right: 5px", @id = "osCheckbox", @name = os.Key });
        @os.Key
        <br />
    }
    @Html.HiddenFor(model => model.SelectedOperatingSystems, new { @id = "SelectedOperatingSystems" })

    <input type="submit" value="Submit"/>
}

使用（Html.BeginForm（“Action”、“Controller”、FormMethod.Post））
{
foreach（模型操作系统中的var os）
{
@Html.CheckBoxFor（model=>model.OperatingSystems.First（x=>x.Key==os.Key）.Value，新的{@style=“margin left:10px；margin right:5px”，@id=“osCheckbox”，@name=os.Key}）；
@操作系统密钥


}
@Html.HiddenFor（model=>model.SelectedOperatingSystems，new{@id=“SelectedOperatingSystems”}）
}

我的javascript如下所示：

<script type="text/javascript">
    $('#osCheckbox').click(function (e) {
        var value = $(this).checked;
        var os = $(this).name;
        var selectedOsList = document.getElementById("SelectedOperatingSystems").value;
        if (value == true)
        {
            var combined = os + ";";
            selectedOsList += combined;
        }
        else
        {
            var combined = os + ";";
            selectedOsList.replace(combined, "");
        }
        $('#SelectedOperatingSystems').val(selectedOsList);
    });
</script>

$（'osCheckbox'）。单击（函数（e）{
var值=$（此）。选中；
var os=$（this）.name；
var selectedOsList=document.getElementById（“SelectedOperatingSystems”）.value；
如果（值==true）
{
var组合=os+“；”；
selectedOsList+=组合；
}
其他的
{
var组合=os+“；”；
选择列表。替换（组合为“”）；
}
$（'SelectedOperatingSystems'）.val（selectedOsList）；
});

现在，输出显示以前选择的操作系统，没有更改。但至少他们现在出现在模型中了。任何帮助都将不胜感激，谢谢

更新 看起来复选框的命名代码也有问题。名称是“值”，而不是操作系统。

var checkVals=[]；
$（“输入[name='osCheckbox']）。每个（函数（i）{
if（$（this.attr（“id”）！=null&$（this.attr（“id”）！=“”）{
如果（选中此项）{
checkVals[i]=$（this.attr（“id”）+“-true”；
}
否则{
checkVals[i]=$（this.attr（“id”）+“-false”；
};
}
});
var name=checkVals.toString（）我终于明白了。谢谢你的帮助，Dilip，对代码稍作调整后，你的解决方案比我尝试的要好得多

首先，操作系统名称中有空格和特殊字符，因此我将@OS.key用引号括起来，并将其放入数据中。然后将id属性更改为name属性

using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
    foreach (var os in Model.OperatingSystems)
    {
        <input name="osCheckbox" type="checkbox" data-osname="@os.Key" data-val-required="The Value field is required.">
        @os.Key
        <br />
    }
    @Html.HiddenFor(model => model.SelectedOperatingSystems, new { @id = "SelectedOperatingSystems" })

    <input id="submitBtn" type="submit" value="Submit"/>
}

使用（Html.BeginForm（“Action”、“Controller”、FormMethod.Post））
{
foreach（模型操作系统中的var os）
{
@操作系统密钥


}
@Html.HiddenFor（model=>model.SelectedOperatingSystems，new{@id=“SelectedOperatingSystems”}）
}

然后我修改了Dilip的解，如下所示；更新：不再使用tostring方法，因为只检查一个操作系统时出现问题：（


var checkVals=[]；
$（#submitBtn'）。单击（函数（e）{
$（“输入[name='osCheckbox']）。每个（函数（i）{
如果（选中此项）{
checkVals[i]=$（此）.data（“osname”）；
}
});
var name=“”；
对于（变量i=0；i

希望这对其他人有所帮助。
您不想将其视为绑定到控制器操作的数组，然后在控制器中将其转换为您想要的格式，这有什么原因吗？我觉得您通常所做的转换是我在控制器层所做的（或数据层，具体取决于意图）另外，不要忘记，
id
是唯一的……在您的情况下，
@id=“osCheckbox”
单击方法只适用于第一个复选框。。。
<script type="text/javascript">
    var checkVals = [];
    $('#submitBtn').click(function (e) {
        $("input[name='osCheckbox']").each(function (i) {
            if (this.checked) {
                checkVals[i] = $(this).data("osname");
            }
        });
        var names = "";
        for (var i = 0; i < checkVals.length; i++) {
            if (checkVals[i] != null && checkVals[i] != "") {
                names += checkVals[i]
                if (i != checkVals.length - 1) {
                    names += ";";
                }
            }
        }
        $('#SelectedOperatingSystems').val(names);
    });
</script>