CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc
Vrankela
Vrankela

Reputation: 1202

How do I check all check boxes when clicking a label in my MVC aplication?

I have a web grid filled with 10 columns, and an n number of rows. The entire web grid is filled with check boxes (apart from the first row which contains the column names), when I click the header of a certain column I want every check box in that column to be checked (regardless if some were checked and some weren't). And when I click it while every check box is checked, I want the reverse effect (to uncheck them all if all of them were checked).

Here is what I did in javascript:

$('.webgrid3-table th:nth-child(5)').click(function () {
    if ($("input[name='val']").attr("checked") != "checked"){
        $("input[name='val']").attr("checked", "checked");
    }
});

What I get from this is it only checks the entire column once per page reload, I want to make it work so it will always work, and even toggle between all checked and none checked.

Here is the design of the web-grid:

@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" />
}

This view displays the following html in the browser like so:

<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>

Upvotes: 0

Views: 190

Answers (3)

Hina
Hina

Reputation: 56

Try this one.

$('.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);    
});

I have not tested this one but it should work. Let me now for further help.

Upvotes: 1

Aravindan
Aravindan

Reputation: 855

Put all those checkBox class name as same like below (for Example)

<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>

Then change your Java script code like below.

$('.webgrid3-table th:nth-child(5)').click(function () {
   $('.check').attr('checked', true);
});

Upvotes: 0

jeremyb
jeremyb

Reputation: 492

Can you add a class to all the elements of the column? That way, you will be able to select them an check or uncheck all the checkboxes of that class.

Upvotes: 0

Related Questions