Chrome 21 not checking radio buttons

Question

I figured this out after much effort so I thought I'd share what I came across, so others can benefit from my effort. Firefox IE and chrome 19 (the only other version I have handy) don't have a problem with this, but chrome 21 does.

If you have this radiobutton

<input type='radio' name'k1' value='v1' checked>

it will not appear checked on the page if it's in an invalid location.

For example I had

<table>
<input type='radio' name'k1' value='v1' checked> 
<tr><td>table information</td></tr> 
</table> 

and no matter what I did, it wouldn't appear checked when the page loaded.

Quyenr

Answer 1

Tested on Google Chrome 21.0.1180.75 and .79

<table>
  <input type="checkbox" name="n" value="v" checked="checked" />
</table>

Missing the <tr><td></tr></td> around the input element causes checked checkboxes not to appear as checked. Additionally, when the form is submitted, those checkboxes don't come to the server-side as being checked, either!

Once the html is formatted properly, the checkboxes should appear checked as indicated by the checked attribute:

<table>
  <tr>
    <td>
      <input type="checkbox" name="n" value="v" checked="checked" />
    </td>
  </tr>
</table>

Creighton

Answer 2

My html was not valid for sure, but in my case it was hidden so I didn't notice right away, but hidden or not, the button will not be checked (and therefore not submitted with the form) when the page loads.

If you place the input in a valid location it works fine...

<table>
<tr><td>table information
<input type='radio' name'k1' value='v1' checked>
</td></tr>
</table>

So sure I had the layout wrong and I'm sure the popular response would be "how could you expect the browser to interpret invalid html?" and I agree, but to not check a radio button especially since it was hidden (and it used to work in prior versions of chrome) makes for a difficult to track down bug. So I thought I might save somebody a few hours of work.

Quyenr

Answer 3

Although it does not pertain to the browser in question, some mobile devices (for example the Galaxy S3) will not check a radio button unless it is in a form. Most other inputs (checkboxes for example) in my experience are fine.

Zero