0

I want to create a checkbox that will have the "power" to check / uncheck a checkboxfor for each items presents in a list.

Here is part of the view as I built it right now (please bear with the false names and convention):

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

As for the "how", well, I have searched a bit around and I have tried this jquery script, but to no avail:

    **** EDIT ****

Here's a new jQuery based on the comments people posted below. The alerts are there on debug purpose, and both appears when needed:

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

I do not mind using jquery, far from it, I just do not know how it works yet. Maybe that's why what I have in mind does not work.

Can anyone help me out? Thank you!

* EDIT *

I will add here what the rendered page gives out for the checkboxes:

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

Maybe that will give out more informations on what's going on.

hsim
  • 2,000
  • 6
  • 33
  • 69

3 Answers3

1

I stand corrected: CheckBoxFor does NOT allow class setting

In your Helper

<div id="divChckBox">
  @Html.CheckBoxFor(x => x[i].m_IsSelected)
</div>

And then make your selector group by the class:

$("#divChckBox :checkbox").attr("checked", "checked");
Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101
  • I've tried it like you mentioned, but the @Html.CheckBoxFor(x => x[i].m_IsForSelling, new{ @class = "chckBoxList"}) won't work until I put a @ in front of class... and it does not work. :( – hsim Mar 08 '13 at 18:56
  • interesting... I'll look into it – Dave Alperovich Mar 08 '13 at 18:57
  • Tried out, but it still does not work. I begin to feel like maybe it is not related to the view, but something else hinder the process, maybe? – hsim Mar 08 '13 at 19:29
  • It still does not work. I have edited my code up there, you can review it. Somehow I begin to believe that something does not allow me to do this, even thought I can confirm that javascript runs on the site. – hsim Mar 08 '13 at 20:06
  • @HerveS, prop wouldnt work. you need to use attr. and checked should be set to "checked" – Dave Alperovich Mar 08 '13 at 20:11
  • Ok, I have corrected this, but I have begun to put alert to see if the function actually works. Here is the script: I saw the first window, but never the second, telling me that the function never actually runs... – hsim Mar 08 '13 at 20:15
  • You should also include removeAttr('checked') to uncheck the box. – Michael Fürstenberg Mar 08 '13 at 20:19
  • 1
    Prop does work, and per the Jquery documentation, it is what you should be using: >>As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method. – Mike C. Mar 08 '13 at 20:23
1
@Html.CheckBox("TheOneCheckBoxToRuleThemAll")

Change your current checkbox code to:

<td>@Html.CheckBoxFor(x => x[i].m_IsSelected, new{ @class = "checkGroup1"})</td>

The easiest Jquery ever (make sure to put it in document.ready like shown):

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

EDIT:

My previous answer used the .attr() attribute. After testing, I had all sorts of trouble getting that to work. After referring to this SO post, I switched to using .prop() and everything magically began to function correctly.

EDIT:

In the example I've provided, your checkboxes MUST look like this:

<input name='itdoesnotmatter' id='donotcare' class='checkGroup1' />

also, do not use that stupid name that I put on there, use something easy like

@Html.CheckBox("MasterCheck")
Community
  • 1
  • 1
Mike C.
  • 3,024
  • 2
  • 21
  • 18
  • Although I do understand your jQuery (this is a premiere!), it still does not work... am I missing something? – hsim Mar 08 '13 at 19:05
  • Ok, well this was more exciting that I expected! Hopefully you are using Jquery 1.6+ so you can use the .prop() function. When using .attr() I had all kinds of trouble with this. – Mike C. Mar 08 '13 at 19:24
  • It is normal that the name of the checkbox, "TheOneCheckBoxToRuleThemAll", does not appear when I type #TheOne... but when I type #divChckBox (see comment made by @David) the tag appears? – hsim Mar 08 '13 at 19:33
  • If feels as if the scripts never actually "run", is that possible? – hsim Mar 08 '13 at 19:45
  • Updated my answer. Uncomment the line with the alert. Whenever I'm adding scripts to a page, that is the very first thing I do is make sure scripts are executing (using that very alert). – Mike C. Mar 08 '13 at 19:51
  • It runs, I saw the window, but the result stays the same... Could it be, as Michael mentioned, that because it's a checkboxfor with a hidden field and, therefore, a hidden value, it's blocking the script in a kind of way? – hsim Mar 08 '13 at 19:54
  • No. The reason the hidden field is there, is so you can get a false sent with POST if the checkbox is not checked. The default behaviour then is to send nothing. So you want the true, false combo. – Michael Fürstenberg Mar 08 '13 at 19:55
  • Use the debugging method of your choice to verify that you are entering the click event (use an alert, or step in using the debugger). If that is fine, then all you need to do is verify that the class your are using (in my example .checkGroup1) exists on all of the checkboxes. – Mike C. Mar 08 '13 at 20:01
  • Here's the script as I wrote it: I can certify that the first alert shows, but not the second alert. – hsim Mar 08 '13 at 20:10
  • Make sure you have it nested inside the $(document).ready() as shown. Any 'binding' code needs to happen in that way. – Mike C. Mar 08 '13 at 20:20
  • Oh? Oh! I see the second alert! Niiice! But the cases remains clicked. I'll post my updated script up there. – hsim Mar 08 '13 at 20:23
  • IF they remain clicked it is because you are using .attr() when you should be using .prop. I have included a link to the jquery .attr() and .prop() for your reference. – Mike C. Mar 08 '13 at 20:26
  • Thank you for the link, I will read them gladly. I would like to know why the checkboxes cannot be linked to the model then? And... it does not work. :( – hsim Mar 08 '13 at 20:31
  • Wait! Wait! I get something. Here's how I wrote my checkboxes: Well, now, the FIRST checkbox follow the behavior of the Select All checkbox! Any idea why the other does not follow? – hsim Mar 08 '13 at 20:34
  • Aaaaaand we have a winner! Thank you! ... But now I need see if the case is checked for each items in the list... another headache coming on! – hsim Mar 08 '13 at 20:39
  • From your updated code/script, it appears that you have mixed my answer with someone elses and that is why. If you would use the answer that I provided, I have tested the code, it does work. – Mike C. Mar 08 '13 at 20:40
0

As there are MANY comments around and many answers, here's my current code (which works!):

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

Now every checkboxes are checked or not depending on the state of the select all checkboxes! Thank you everyone. Now I need to solve the problem of "unlinking" the result of the checkbox in my controller because a behavior was linked to this. But it's another problem.

hsim
  • 2,000
  • 6
  • 33
  • 69