Radio Box not cooperating

[ShadowMage]

I have a set of radio buttons whose "checked" status is set in PHP when printing to the screen. The "checked" property is set, yet the box doesn't get checked. See the attached photo. Can anyone explain what's going on here?

 

[Don E]

Shows true for me when having it as: checked="checked" in firefox. Try having just checked with no double quotes: checked

[dsonesuk]

Hi long time no see

Thats the default when page first loaded, has any of other radio buttons been selected afterwards or altered by js.

select or select="select" should give same result. what am i doing ?

 

checked or checked="checked" should give same result

Edited December 2, 2015 by dsonesuk

[dsonesuk]

If you have double clicked or changed the value manually of checked attribute to change it to false within FireBug DOM window, it will remain as that value until you edit to change it back OR go to address bar at end of url and hit enter to reload the page (note hitting refresh does not reset it back).

 

If JavaScript is used to change checked to false it will show false compared to true set by the checked attribute.

[ShadowMage]

Hi dsonesuk, it's been a while.

 

The box appears this way when it is first loaded. There are several sets of buttons like this, some of them appear correctly some don't. There is no JavaScript involved at this point. At least, not involving the radio buttons. These radio buttons are contained in a div that I'm using as a popup tooltip, so JavaScript is used to show/hide that tooltip but that's it.

 

EDIT: Not sure if it was clear in the OP, but the boxes are not checked when displaying on the screen either. It isn't just the DOM window that I'm asking about.

Edited December 3, 2015 by ShadowMage

[ShadowMage]

Noticed something interesting. Not sure if I can explain properly, but here goes:

 

First, a little bit of setup information. I mentioned before that these radios are contained in a div used as a popup tooltip. These tooltips are triggered by hovering over the items in a list (not a list element, they're actually in a table so the element is actually a td) and using the mouseover/mouseout events. Clicking on an item brings up a separate div, the contents of which are retrieved via AJAX depending on which item in the list was clicked. I can make changes to the information and save it back to the database, again via AJAX. The AJAX request then sends back a new HTML string which is used to replace the popup tooltip div for the item I just edited. What I've noticed, is that only the last edited item is showing the radio buttons being checked. All other popups have their radios unchecked, even though in the HTML it shows the checked attribute like in the image I posted. This is true even after reloading the page, clearing cache and reloading, even closing the browser and reopening.

[dsonesuk]

Well i've been trying to reproduce the same result,first with normal html, javascript created radio buttons, but getting nowhere, it always show radio button checked using checked="checked".

[typomaniac]

Go with a simple <input type="radio"value="xxx" checked>

That's what I do if I want a default pre-checked. Just a simple word-without quotes.

[dsonesuk]

XHTML must use checked="checked" apparently, but it works for both, and you need to separate attributes by at least one space as in

 

<input type="radio" value="xxx" checked>

 

Not

 

<input type="radio"value="xxx" checked>

 

else merging will occur with unrecognizable attributes appearing as browser attempts to make sense on what is required.

[ShadowMage]

So I found out what's causing this. It's actually pretty stupid on my part. There are multiple copies of these popup divs. They use the same form elements but contain different information. I took care of the unique ID issue by appending a "set ID" number to the IDs of all the elements. What I forgot to take into account was that radio buttons form into groups when they have the same name which is good and how they are supposed to work. I had to give them the "set ID" treatment that I gave the element IDs. Now everything works just fine. I can't believe it took me as long as it did to figure this out...