How to make checkbox selected during rendering

Question

I have already look and applied lots of the solution methods on web i.e. Check/Uncheck checkbox with javascript? but my problem is make the checkbox to be checked after page load. I use $(window).load(function () and $(document).ready(function () but none of them working. However, if I can set checked property in html of checkbox the problem will be solved. But I cannot set this property via a Javascript variable. I also tried by jQuery but the problem is related to setting this property after rendering of checkbox. Any idea to fix the problem?

<input type="checkbox" class="form-check-input" id="chkAll" >

//Although the checkboz is already rendered at this stage I cannot set it
$(window).load(function () {
    if (@Html.Raw(Json.Encode(ViewBag.IsAll))) {
        document.getElementById("chkAll").checked = true;
    }
});

and

//As the checkbox is not rendering during page load this method is useless
$(document).ready(function () {
    if (@Html.Raw(Json.Encode(ViewBag.IsAll))) {
        document.getElementById("chkAll").checked = true;
    }
});

If the logic to set the checked state of the field is coming from the server side, why bother checking it in JS? Use your ASP code to do it before rendering on the client — Rory McCrossan, Mar 30 '17 at 08:43
RoryMcCrossan You are absolutely right, but when trying with ** Html.CheckBox** the label is missing sometimes. It is strange, but there is no mistake related to usage: **Html.CheckBox("All?", new { id = "chkAll", class = "form-check-input", checked = ViewBag.IsAll })** (I used @ but as the comment not permit I removed it from here) — Jack, Mar 30 '17 at 08:57
Why are you not using `@Html.CheckBoxFor()` to bind to a view model property? — , Mar 30 '17 at 09:20
@StephenMuecke Because **Html.CheckBox("chkAll", new { class = "form-check-input", checked = ViewBag.IsAll ? "checked" : "" })** not works (I need to delete checked in order to make unchecked. But the followng code is not working: **Html.CheckBox("chkAll", new { class = "form-check-input", (ViewBag.IsAll ? "checked = checked" : "") })** I omitted at signs in teh comment. Any idea about how to make unchecked except from removing "checked = checked"? — Jack, Mar 30 '17 at 11:10
Your `ViewBag` property is named `IsAll` not `chkAll` so its `@Html.CheckBox("IsAll");` and if `IsAll` is `true` it will be checked, otherwise not. (and use backticks to properly format your code in comments). But why are you not using a view model and strongly bind to your model. — , Mar 30 '17 at 11:13
@StephenMuecke Perfect!.. Html.CheckBox("IsAll") is working like a charm. Actually I had tried to add IsAll property in my ViewModel, but as I use a **IEnumerable** I did not want to use the property in ViewModel (I could not get Model.IsAll due to IEnumeration (using FirstOrDefault() did not seem to be pretty). WHat would you suggest? — Jack, Mar 30 '17 at 11:29
Create a view model that represents your view and strongly bind to it - e.g. containing properties `bool IsAll` and `IEnumerable?> YourCollection` (and use backticks to format your code!) — , Mar 30 '17 at 11:32
I had already did it, but the problem is that I used this model as IEnumerable in my razor view and I could not use IsAll directly and needed to use with i.e. FirstOrDefault() that I did not like. — Jack, Mar 30 '17 at 11:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139488/discussion-between-stephen-muecke-and-clint-eastwood). — , Mar 30 '17 at 11:40

score 1 · Answer 1 · answered Mar 30 '17 at 08:51

1

Why you want check it after render? If you want it by default you can get it using "checked" html attribute.

If you need this way (i dont know the reasoning behind), if using $(document).ready() or $(window).load() are not working, have you tried to use a timeout?

$(document).ready(function(){
    setTimeout(function(){
        $("#chkAll").prop("checked",true); // I prefer the jQuery way, since you are using it, but you can use native js if you prefer
    },50);
})

This will create a 50ms delay and maybe works for you

answered Mar 30 '17 at 08:51

Diego N.

562
3
10

Hola Amigo, good idea but not working (I think the problem is related to making the checkbox to be selected). – Jack Mar 30 '17 at 09:02
`if (@Html.Raw(Json.Encode(ViewBag.IsAll)))` is it getting inside this if statement? – Diego N. Mar 30 '17 at 09:12
Yes there is no problem regarding to this line. – Jack Mar 30 '17 at 10:48
Thanks for your help, but I solved the problem via **Html.CheckBox("IsAll")**. Nevertheless, voted+ for your help... – Jack Mar 30 '17 at 11:30
@ClintEastwood Thanks! – Diego N. Mar 31 '17 at 09:59

score 1 · Accepted Answer · answered Mar 30 '17 at 11:45

1

You do not need any javascript. Your using the CheckBox() method which will correctly set the checked attribute based on the value of the boolean property your binding to. The issue is that your not binding to your property. Change the code in the view to

@Html.CheckBox("IsAll")

and if the value of ViewBag.IsAll istrue` it will be checked, otherwise it will not.

answered Mar 30 '17 at 11:45

Could you please undelete your answer on https://stackoverflow.com/questions/46560515/how-to-create-dynamic-menu-using-tree – Jack Oct 10 '17 at 11:11

score 0 · Answer 3 · answered Mar 30 '17 at 09:13

i don't know exactly what you need , please check the below snippet

jQuery(function($) {
   $('#chkbox').prop('checked', true);
});

<input type="checkbox" id="chkbox" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

score 0 · Answer 4 · answered Mar 30 '17 at 11:47

0

Do it.

$('element').prop('checked', true);

answered Mar 30 '17 at 11:47

Angelo Ribeiro

11
1

How to make checkbox selected during rendering

4 Answers4