用于全部选中/取消选中的复选框
本文关键字:复选框 取消 用于 全部 | 更新日期: 2023-09-27 18:02:55
我想创建一个复选框,该复选框将具有选中/取消选中列表中每个项目的复选框的"能力"。
以下是我现在构建的部分视图(请接受假名和惯例(:
<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>
也许这会提供更多关于正在发生的事情的信息。
@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文章之后,我改用.pr((,一切都神奇地开始正常工作。
- Jquery.Attr((
- Jquery.Prop((
编辑:
在我提供的示例中,您的复选框必须如下所示:
<input name='itdoesnotmatter' id='donotcare' class='checkGroup1' />
另外,不要用我在上面写的那个愚蠢的名字,用一些简单的东西,比如
@Html.CheckBox("MasterCheck")
我已更正:CheckBoxFor不允许设置类
在您的助手中
<div id="divChckBox">
@Html.CheckBoxFor(x => x[i].m_IsSelected)
</div>
然后按类别将您的选择器分组:
$("#divChckBox :checkbox").attr("checked", "checked");
由于有很多评论和答案,下面是我当前的代码(有效!(:
<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>
现在,每个复选框都被选中或不被选中,这取决于全选复选框的状态!谢谢大家。现在我需要解决"取消链接"控制器中复选框的结果的问题,因为一个行为与此相关。但这是另一个问题。