0

我想创建一个复选框，该复选框将具有“权力”来检查/取消选中列表中每个项目的复选框。

这是我现在构建的视图的一部分（请容忍错误的名称和约定）：

    <p>
        @using (Html.BeginForm("SendObj", "Manager"))
        {
            <p>
               Select / UnSelet All Items @Html.CheckBox("selectAll", true) 
            </p>
            <table id="objToSend">
                <tr>
                    <th>Obj Name</th>
                    <th>Number In Stock</th>
                    (...)
                </tr>
                @for (int i = 0; i < Model.Count(); i++)
                {
                    <tr>
                        <td>@Html.DisplayFor(x => x[i].m_OthObj.m_ObjName)</td>
                        <td>@Html.DisplayFor(x => x[i].m_NbInStock)@Html.HiddenFor(x => x[i].m_NbInStock)</td>
                        (...)
                    <div id="divChckBox">
                        <td>
                            @Html.CheckBoxFor(x => x[i].m_IsSelected)
                        </td>
                    </div>

                    </tr>
                }

            </table>
            <input type="submit" value="Send"/>
        }
    </p>

至于“如何”，好吧，我搜索了一下，我尝试了这个 jquery 脚本，但无济于事：

    **** EDIT ****

这是基于人们在下面发布的评论的新 jQuery。警报用于调试目的，并在需要时出现：

    <script type="text/javascript">
    $(document).ready(function() {
        alert("The document is ready");
        $("#selectAll").click(function() {
            alert("The case has been clicked");
            var chkValue = $(this).is(":checked");
            $("#divChckBox").attr("checked", "checked");
        });
    });
    </script>

我不介意使用 jquery，远非如此，我只是不知道它是如何工作的。也许这就是为什么我的想法不起作用的原因。

谁能帮我吗？谢谢！

* 编辑 *

我将在此处添加渲染页面为复选框提供的内容：

<td><input checked="checked" class="chckBoxList" data-val="true" data-val-required="The m_IsSelected field is required." name="[0].m_IsSelected" type="checkbox" value="true" /><input name="[0].m_IsSelected" type="hidden" value="false" /></td>

也许这会提供更多关于正在发生的事情的信息。

4

3 回答 3

1

我的立场得到纠正： CheckBoxFor 不允许类设置

在你的助手中

<div id="divChckBox">
  @Html.CheckBoxFor(x => x[i].m_IsSelected)
</div>

然后按类使您的选择器组：

$("#divChckBox :checkbox").attr("checked", "checked");
于 2013-03-08T18:53:13.380 回答
1 
@Html.CheckBox("TheOneCheckBoxToRuleThemAll")

将您当前的复选框代码更改为：

<td>@Html.CheckBoxFor(x => x[i].m_IsSelected, new{ @class = "checkGroup1"})</td>

有史以来最简单的 Jquery（确保将其放入 document.ready 中，如图所示）：

  <script type="text/javascript">
    $(document).ready(function () {
         //alert("the document is ready"); 
         $("#TheOneCheckBoxToRuleThemAll").click(function () {
              //alert("inside my click event");
              var chkValue = $(this).is(":checked");
              $(".checkGroup1").prop("checked", chkValue);
          });
     });
  </script>

编辑：

我之前的回答使用了 .attr() 属性。测试后，我遇到了各种各样的麻烦。在参考了这篇 SO 帖子后，我转而使用 .prop() 并且一切都神奇地开始正常运行。

编辑：

在我提供的示例中，您的复选框必须如下所示：

<input name='itdoesnotmatter' id='donotcare' class='checkGroup1' />

另外，不要使用我放在那里的那个愚蠢的名字，使用简单的名字，比如

@Html.CheckBox("MasterCheck")
于 2013-03-08T18:58:07.500 回答
0

由于周围有很多评论和很多答案，这是我当前的代码（有效！）：

<script type="text/javascript">
    $(document).ready(function() {
        //alert("The document is ready");
        $("#selectAll").click(function() {
            //alert("The case has been clicked");
            var chkValue = $(this).is(":checked");
            $(".divChckBox").prop("checked", chkValue);
        });
    });
</script>
<p>
    @using (Html.BeginForm("SendObj", "Manager"))
    {
        <p>
            Select / UnSelet All Items @Html.CheckBox("selectAll", true) 
        </p>
        <table>
            <tr>
                <th>Card Name</th>
                <th>Number In Stock</th>
                (...)
            </tr>
            @for (int i = 0; i < Model.Count(); i++)
            {
                <tr>
                    <td>@Html.DisplayFor(x => x[i].m_OthObj.m_ObjName)</td>
                    <td>@Html.DisplayFor(x => x[i].m_NbInStock)@Html.HiddenFor(x => x[i].m_NbInStock)</td>
                    (...)
                    <td>
                        <input type="checkbox" name="itdoesnotmatter" class="divChckBox" checked="true"/>
                    </td>
                </tr>
            }

        </table>
        <input type="submit" value="Send"/>
    }
</p>

现在每个复选框都被选中或不选中，具体取决于全选复选框的状态！谢谢大家。现在我需要解决在我的控制器中“取消链接”复选框结果的问题，因为有一个行为与此相关联。但这是另一个问题。

于 2013-03-08T20:43:59.937 回答