What doesn't checkbox value = '1' work in this case?

Question

I've been reading up on stackoverflow about checkboxes and setting their value to 1 to make them checked, but it doesn't seem to work in my case. I have a databinder eval expression that evaluates to 1 when my checkbox should be checkeed, and I've verified the generated page has at least one input checkbox with value=1 that is not displaying as checked.

What am I missing? I tried just setting the checked property, but even checked=' ' counts as checked, so I couldn't see anyway to make that work for both checked and unchecked checkboxes.

Here is the html that doesn't seem to work.

<input type='checkbox' class="datacell" id='603' 
style='text-align: center' value='1' />

Here's the databinders that I have set up in my repeater for the main input elements

<input type='<%# Eval("InputType") %>' class="datacell" 
id='<%# Eval("CellID") %>' style='<%# Eval("InputAlign") %>' 
value='<%# Eval("TestResult") %>' />

The other evals just make sure the right cells are checkboxes, and that the alignment of cells works a certain way (checkboxes aligned center, numeric stuff aligned right and other stuff aligned left.)

Edit: So how can do that with a Databinding Expression, that's my dilemma.

Solution 1

According to the W3C specification:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set.

So setting any value for the checkbox attribute will check the checkbox.

• checked="checked"
• checked="false"
• checked="true
• checked

will all mark the checkbox as checked. You need to remove the attribute entirely to clear the checkbox.

So, a possible solution for you would be:

<input type='<%# Eval("InputType") %>' class="datacell" 
id='<%# Eval("CellID") %>' style='<%# Eval("InputAlign") %>' 
<%# isChecked((int)Eval("TestResult")) %> />

Code-behind

protected string isChecked(int testResult) {
  if (testResult == 1) {
    return "checked='checked'";
  } else {
    return "";
  }
}

Solution 2

The proper way to set a checkbox as checked is:

<input type="checkbox" class="datacell" id="603"
style="text-align: center" checked="checked" />

and the proper way to render an unchecked checkbox is (note that the entire checked attribute is missing):

<input type="checkbox" class="datacell" id="603"
style="text-align: center"/>

Solution 3

You should use checked="checked" attribute of the checkbox to render it as checked. The value attribute is the value that will be submitted to server in case the checkbox was checked when form was submited.

Solution 4

It's quite simple :

<input type="checkbox" value="whatever" checked> Create a checked box
<input type="checkbox" value="whatever"> Creates an unchecked box

View more solutions

Comments

[Mr. Shiny and New 安宇]

I think you meant to write "checked" instead of "checkbox" for your attibute list.

[Chris Van Opstal]

Whoops, fixed. Thank you sir.

[TheTXI]

@Neil: The W3C Spec states that it is treated as an On/off and therefore any value will work (or no value at all). Don't blame it on the browsers.

[Neil Aitken]

A value of yes will fail validation with the error: "value of attribute "checked" cannot be "yes"; must be one of "checked".

[malvadao]

you forgot to tell it