我有一个填充了10列的网格，并且有n行。整个网格都填充了复选框（除了包含列名的第一行），当我单击某列的标题时，我希望检查该列中的每个复选框（无论是否检查了一些复选框）没有）。当我在选中每个复选框时单击它时，我想要反向效果（如果检查了所有复选框，则取消选中它们。）
以下是我在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>
答案 0 :(得分：1)
试试这个。
$('.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);
});
我没有测试过这个，但它应该可行。现在让我提供进一步的帮助。
答案 1 :(得分：0)
您可以在列的所有元素中添加一个类吗？ 这样，您就可以选中它们或取消选中该类的所有复选框。
答案 2 :(得分：0)
将所有checkBox类名称设置为如下所示（例如）
<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);
});