如何在 MVC 应用程序中单击标签时选中所有复选框
How do I check all check boxes when clicking a label in my MVC aplication?
我有一个充满 10 列和 n 行的 Web 网格。整个 Web 网格都充满了复选框（除了包含列名称的第一行），当我单击某个列的标题时，我希望选中该列中的每个复选框（无论是否选中了一些复选框，有些没有）。当我在选中每个复选框时单击它时，我想要相反的效果（如果所有复选框都被选中，则取消选中它们）。
这是我在javascript中所做的：
$('.webgrid3-table th:nth-child(5)').click(function () {
if ($("input[name='val']").attr("checked") != "checked"){
$("input[name='val']").attr("checked", "checked");
}
});
我从中得到的是，每次重新加载页面时，它只检查一次整列，我想让它工作，这样它就会一直工作，甚至在所有选中和没有选中之间切换。
以下是网络网格的设计：
@using (Html.BeginForm("InsertSensorsInExistingPredefineView", "PredefinedViews", FormMethod.Post))
{
@gridSensorChoose.GetHtml(
tableStyle: "webgrid3-table",
headerStyle: "webgrid3-header",
footerStyle: "webgrid3-footer",
alternatingRowStyle: "webgrid3-alternating-row",//
selectedRowStyle: "webgrid3-selected-row",
rowStyle: "webgrid3-row-style",//
mode: WebGridPagerModes.All,
columns:
gridSensorChoose.Columns(
gridSensorChoose.Column("SensorID", format: @<text> <input readonly="readonly" name="SensorID" id="SensorID" value="@item.SensorID" /> </text>, style: "col1Width"),
gridSensorChoose.Column("DeviceID", format: @<text> <span id="DeviceID">@item.DeviceID</span> </text>, style: "col1Width"),
gridSensorChoose.Column("SensorType", format: @<text> <span id="SensorType" class="SensorType">@item.SensorType</span> </text>, style: "col1Width"),
gridSensorChoose.Column("SensorName", @Html.Localize("sensorName").ToString(), format: @<text> <span><label id="SensorName">@item.SensorName</label> </span> </text>, style: "col2Width", canSort: false),
gridSensorChoose.Column("VAL", format: @<text><span class="Val"> @Html.CheckBox("val") </span></text>, style:"col1Width", canSort: false),
gridSensorChoose.Column("MIN", format: @<text><span class="Min"> @Html.CheckBox("min") </span> </text>, style: "col1Width", canSort: false),
gridSensorChoose.Column("AVG", format: @<text> <span class="Avg"> @Html.CheckBox("avg") </span> </text>, style: "col1Width", canSort: false),
gridSensorChoose.Column("MAX", format: @<text> <span class="Max"> @Html.CheckBox("max") </span> </text>, style: "col1Width", canSort: false),
gridSensorChoose.Column("SUM", format: @<text> <span class="Sum"> @Html.CheckBox("sum") </span> </text>, style: "col1Width", canSort: false),
gridSensorChoose.Column("INT", format: @<text> <span class="Int"> @Html.CheckBox("int") </span> </text>, style: "col1Width", canSort: false)
))
<input type="submit" value="@Html.Localize("save")" formaction="/PredefinedViews/InsertSensorsInExistingPredefineView" />
}
此视图在浏览器中显示以下 html，如下所示：
<table class="webgrid3-table">
<thead>
<tr class="webgrid3-header">
<th scope="col" style="display: none;">
<a href="/PredefinedViews/CreateSensorList? selDeviceID=1&sort=SensorID&sortdir=ASC">SensorID</a>
</th>
<th scope="col" style="display: none;">
<a href="/PredefinedViews/CreateSensorList?selDeviceID=1&sort=DeviceID&sortdir=ASC">DeviceID</a>
</th>
<th scope="col" style="display: none;">
<a href="/PredefinedViews/CreateSensorList?selDeviceID=1&sort=SensorType&sortdir=ASC">SensorType</a>
</th>
<th scope="col">
Sensor Name
</th>
<th scope="col">
VAL
</th>
<th scope="col">
MIN
</th>
<th scope="col">
AVG
</th>
<th scope="col">
MAX
</th>
<th scope="col">
SUM
</th>
<th scope="col">
INT
</th>
</tr>
</thead>
<tbody>
<tr class="webgrid3-row-style">
<td class="col1Width" style="display: none;"> <span id="SensorID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">10</span> </td>
<td class="col2Width"> <span><label id="SensorName">Soil Temperature </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int" style="display: none;"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-alternating-row">
<td class="col1Width" style="display: none;"> <span id="SensorID">2</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">1</span> </td>
<td class="col2Width"> <span><label id="SensorName">Soil Moisture na 15cm</label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int" style="display: none;"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-row-style">
<td class="col1Width" style="display: none;"> <span id="SensorID">3</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">1</span> </td>
<td class="col2Width"> <span><label id="SensorName">Soil Moisture na 30cm</label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int" style="display: none;"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-alternating-row">
<td class="col1Width" style="display: none;"> <span id="SensorID">4</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">101</span> </td>
<td class="col2Width"> <span><label id="SensorName">Leaf wetness prvi</label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int" style="display: none;"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-row-style">
<td class="col1Width" style="display: none;"> <span id="SensorID">5</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">201</span> </td>
<td class="col2Width"> <span><label id="SensorName">Ait temperature </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-alternating-row">
<td class="col1Width" style="display: none;"> <span id="SensorID">6</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">202</span> </td>
<td class="col2Width"> <span><label id="SensorName">Air humidity </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-row-style">
<td class="col1Width" style="display: none;"> <span id="SensorID">7</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">203</span> </td>
<td class="col2Width"> <span><label id="SensorName">Wind speed </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-alternating-row">
<td class="col1Width" style="display: none;"> <span id="SensorID">8</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">204</span> </td>
<td class="col2Width"> <span><label id="SensorName">Wind direction </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-row-style">
<td class="col1Width" style="display: none;"> <span id="SensorID">9</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">205</span> </td>
<td class="col2Width"> <span><label id="SensorName">Precipitation </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-alternating-row">
<td class="col1Width" style="display: none;"> <span id="SensorID">10</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">206</span> </td>
<td class="col2Width"> <span><label id="SensorName">Solar radiation </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-row-style">
<td class="col1Width" style="display: none;"> <span id="SensorID">51</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">20</span> </td>
<td class="col2Width"> <span><label id="SensorName">Battery </label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum" style="display: none;"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int" style="display: none;"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
<tr class="webgrid3-alternating-row">
<td class="col1Width" style="display: none;"> <span id="SensorID">56</span> </td>
<td class="col1Width" style="display: none;"> <span id="DeviceID">1</span> </td>
<td class="col1Width" style="display: none;"> <span id="SensorType" class="SensorType">101</span> </td>
<td class="col2Width"> <span><label id="SensorName">Leaf wetness drugi</label> </span> </td>
<td class="col1Width"><span class="Val"> <input id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span></td>
<td class="col1Width"><span class="Min" style="display: none;"> <input id="min" name="min" type="checkbox" value="true"><input name="min" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Avg" style="display: none;"> <input id="avg" name="avg" type="checkbox" value="true"><input name="avg" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Max" style="display: none;"> <input id="max" name="max" type="checkbox" value="true"><input name="max" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Sum"> <input id="sum" name="sum" type="checkbox" value="true"><input name="sum" type="hidden" value="false"> </span> </td>
<td class="col1Width"> <span class="Int" style="display: none;"> <input id="int" name="int" type="checkbox" value="true"><input name="int" type="hidden" value="false"> </span> </td>
</tr>
</tbody>
试试这个。
$('.webgrid3-table th:nth-child(5)').on("click",function () {
if($("input[name='val']:checkbox:checked").length < ($("input[name='val']:checkbox").length))
$("input[name='val']:checkbox").prop("checked",true);
else
$("input[name='val']:checkbox").prop("checked", false);
});
我还没有测试过这个，但它应该可以工作。现在让我进一步帮助。
你能为列的所有元素添加一个类吗？这样，您将能够选中或取消选中该类的所有复选框。
将所有这些复选框类名如下所示（例如）
<tr class="webgrid3-alternating-row">
<td class="col1Width"><span class="Val">
<input class="check" id="val" name="val" type="checkbox" value="true"><input name="val" type="hidden" value="false"> </span>
</td>
</tr>
然后更改您的 Java 脚本代码，如下所示。
$('.webgrid3-table th:nth-child(5)').click(function () {
$('.check').attr('checked', true);
});
相关文章：
- Dojo复选框标签
- 将函数事件绑定到更改函数的复选框/标签
- 添加复选框标签中的值
- 隐藏Zend单选按钮和复选框标签在javascript点击处理程序中
- 单击时，添加类，直到复选框/标签单击关闭
- 动态设置复选框标签文本会导致复选框中的样式问题
- ExtJS 2.3:复选框标签上的工具提示
- 意外的空格，而不是不必要的复选框标签
- Android浏览器复选框标签不可点击
- 复选框标签的位置
- 在复选框标签旁边添加文本
- 将复选框标签复制到隐藏文本字段
- 当标记/清除复选框时，引导复选框标签上的工具提示不会隐藏
- 在Javascript中更改复选框标签
- 用于复选框标签的Jquery选择器
- 复选框标签在IE上不起作用
- 使用复选框+标签组合防止双击错误
- 如何获取待选中的复选框标签，并使用数组显示标签
- Jquery通过javascript设置复选框标签的名称
- 清空复选框标签和存储在数据库中的数据
