Question

我有一个填充了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&amp;sort=SensorID&amp;sortdir=ASC">SensorID</a>
        </th>
        <th scope="col" style="display: none;">
            <a href="/PredefinedViews/CreateSensorList?selDeviceID=1&amp;sort=DeviceID&amp;sortdir=ASC">DeviceID</a>
        </th>
        <th scope="col" style="display: none;">
            <a href="/PredefinedViews/CreateSensorList?selDeviceID=1&amp;sort=SensorType&amp;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>

Answer 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);    
});

我没有测试过这个，但它应该可行。现在让我提供进一步的帮助。

Answer 2

您可以在列的所有元素中添加一个类吗？这样，您就可以选中它们或取消选中该类的所有复选框。

Answer 3

将所有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);
});

单击MVC应用程序中的标签时如何检查所有复选框？

3 个答案: