html - 如何创建绑定到列表的可点击（开/关状态）html元素

Question

我需要创建大量具有两种状态的可点击 html 元素：puched/unpushed。这个海量中只有一个元素可以处于推动状态。它类似于 RadioButtonList。我还必须将选定（推送）的元素值绑定到 ViewModel 中的 SelectedValueId。感谢您对这个特定主题的任何帮助！谢谢！这是它的设计：

到目前为止，我唯一得到的是像这样的巨大链接：

<div class="content-right">
                @foreach (var item in Model.AvailablePrivacyStatuses)
                { 
                    <a onclick="doTheJob(@item.Value)" href="#">@item.Text</a>
                }
            </div>

但是如何从 doTheJob(@item.Value) 中获取值到 ViewModel 中呢？

Answer 1

    <div class="content-right">
@Html.HiddenFor(m => m.SelectedPrivacyStatusId)                    
@foreach (var item in Model.AvailablePrivacyStatuses)
                    {
                        <a data-id="@item.Value" class="selectable-button" id="status-link-@item.Value" href="#">@item.Text</a>
                    }
                </div>
                <script>
                    jQuery('div.content-right a')
                        .click(function () {
                            $(this).addClass('active');
                            $('div.content-right a').not(this).removeClass('active');
                            var id = this.getAttribute('data-id');
                            document.getElementById('SelectedPrivacyStatusId').value = id;
                        });


                </script>