Make a checkbox checked or unchecked based on the value?

Question

How can we make a checkbox checked or unchecked programatically based on the value? That is to say, for a particular user if the value is true, the checkbox should be checked, else if the value is false the checkbox needs to be unchecked. I declared the checkbox in the following way:

<input type="checkbox" class="checkbox">

ranah · Answer 1 · 2017-02-06T19:45:56.430

If you do not want to use @Html.CheckBoxFor for whatever reason and you'd like to stick to

         <input type="checkbox">

then this is what I found to be the best way to do it:

 <input @(Convert.ToBoolean(Model.YourPropertyHere) == true ?   "checked='checked'" : string.Empty)  type="checkbox" />

The code that @Yasser provided above:

    checked="@(required ? "checked" : "")"

Did not work for me because it was still adding the checked attribute to the element, and setting checked="" will still render the check box as checked, which was not the desired output, instead if you wrap the whole statement into a razor block like so:

     @(Convert.ToBoolean(Model.YourPropertyHere) == true ?   "checked='checked'" : string.Empty)

you will get the desired results.

Yasser Shaikh · Accepted Answer · 2019-02-08T08:56:24.203

27

if(condition = true)
{
@Html.CheckBoxFor(x => x.Test, new { @checked = "checked" })
}
else
{
@Html.CheckBoxFor(x => x.Test)
}

Hope this helps :)

edited Feb 08 '19 at 08:56

answered Aug 07 '12 at 05:08

Yasser Shaikh

46,934
46
204
281

im trying the 2nd line of code, with this , will the checkbox be checked or unchecked,if the value of text is true? – always v Aug 07 '12 at 05:38
mark as answer, if it helped you. Also doin that will improve ur accpetance rate. – Yasser Shaikh Aug 07 '12 at 06:22
12

This is incorrect: `checked="@(required ? "checked" : "")"` - if you want the element to be unchecked - the attribute should not be present at all. – Alexander Sep 09 '15 at 16:11
Indeed @Alexander the example is wrong and costs me 5 minutes of my life that I want back :) – MartinH Jul 27 '17 at 08:23
1

@Alexander noticed your comment after 4 years. Updated the answer +1. – Yasser Shaikh Feb 08 '19 at 08:56

score 18 · Answer 3 · answered Oct 04 '15 at 15:32

There is a simpler way to include or not include the checked attribute if you are writing our your own <input> instead of using alternatives such as Html.CheckBoxFor:

<input type="checkbox" checked="@isChecked">

Razor is smart enough to automatically generate either

<input type="checkbox" checked="checked">

or

<input type="checkbox">

depending on whether isChecked is true or false. No need for if statements or duplicate code.

score 2 · Answer 4 · edited May 23 '17 at 11:55

If you're using MVC and passing in model values correctly from your controller, then

@Html.CheckBoxFor(model => model.checkBox1)

...is all you need. The html-helper does the logic to figure out whether or not to insert the checked="checkbox" code.

Otherwise, without the HTML-helper you can dynamically generate the attribute yourself (others have pointed out how), but don't make the mistake of thinking that checked = "" will leave the box unchecked. See this answer for an explanation.

score 1 · Answer 5 · answered Aug 07 '12 at 05:36

If you want to check/uncheck check box value in code-behind, you have to include an ID and runat server attributes in your check box tag.

<checkbox Id="chk" runat="server" class="chkbox"/>

code-behind:

if(yourcondition==true)
  chk.checked = true;
else
  chk.checked = false;

If you want to do it in javascript

<checkbox Id="chk" class="chkbox"/>

JS:

if(yourcondition==true)
  chk.checked = true;
else
  chk.checked = false;

score 1 · Answer 6 · answered Dec 27 '18 at 09:46

1

if(condition = true)
{
@Html.CheckBoxFor(x => x.Test, new { @checked = true })
}
else
{
@Html.CheckBoxFor(x => x.Test)
}

answered Dec 27 '18 at 09:46

Prince

277
2
16

This appears to be practically the same (but with less detail) as in [the accepted answer from six years ago](https://stackoverflow.com/a/11839591/1364007). [From review](https://stackoverflow.com/review/low-quality-posts/21785828). – Wai Ha Lee Dec 27 '18 at 13:40

score 0 · Answer 7 · answered Aug 27 '18 at 18:10

0

try this:

<input type="radio" name="filter_favorites" value="Favorites" @(loggedIn ? "checked" : "") />

So this is a simple radio button which checks loggedIn variable & if true radio button will be checked else not.

answered Aug 27 '18 at 18:10

Raj

132
3

score -1 · Answer 8 · answered Aug 07 '12 at 05:22

-1

You have to have a name for the checkbox, eg:

<input name=checkBox1 type="checkbox" class="checkbox">

For functionality :

    if(x==1){
   checkBox1.Checked = true; //To Check
}
else{
   checkBox1.Checked = false // To Uncheck
}

answered Aug 07 '12 at 05:22

hYk

764
1
8
21

where do i need to write that functionality, in my view page? – always v Aug 07 '12 at 05:32

Make a checkbox checked or unchecked based on the value?

8 Answers8

Linked

Related