Develop Reference

How do I style a radio button to look like a normal clickable button?

I'm trying to make my radio buttons look like normal buttons - how would I do that? I have seen a lot of other questions regarding this but i am not able to get a definite answer. This is what I have tried:
<input name="question${questionNumber}" id="q&a" class="press" type="radio" value="${letter}"><label for="q&a">${letter}</label>
However, my javascript code is not logging it and I am still having to click the radio button for the javascript to recognise that I have clicked the button and it's value is only found if I click a radio button. How do I solve this issue?

Why use a radio button at all if you want it to look like a normal button? Radio buttons are for selecting 1 option out of many, like in a multiple-choice test. Their design reflects this purpose and most people know how to interact with radio buttons when they see them. If you use a normal button, you can use
Element.addEventListener(“click” function() {
// do your stuff
})

Multiple autofocus on radio input select option

I'm using a Twitter Bootstrap 3 form with (4) Radio form controls. When a user clicks on any of the four radio controls, an <input type="text"> appears. How do I make it, so that the first input, on any radio option select is "autofocus".
To see code, if you may, please visit: https://von.host/cart.php?a=add&pid=20
It just seems silly to have the user click a radio button, than click again on the input field and type, than click once more on submit button...instead of three clicks, I wish to make it two.
p.s. - i added "autofocus" to all (4) input fields, but it only worked for the first one...of course ^ _ ^

I think, you can this only with a little part of javascript :) for example:
$('input[type="radio"]').focus(function(){
$(this).parent().find('input[type="text"]').focus();
});
In nutshell, this code pass the focus for the input field, when the radio give it.

Keep the autofocus attribute in the first one and use this jQuery code:
$('.domainoptions .option input:radio[name="domainoption"]').change(
function(){
$(this).parent().next().find('input[type="text"]').first().focus();
}
);

A radio button within the result of another

I can't seem to find any information on whether what I would like to do is possible or not.
Here is my current code: http://jsfiddle.net/richerdk/zudCf/
Is it possible to have a radio button within the result of another radio button ex:
User selects yes radio button this is the result:
<div id="div1" class="tab">
<p>Why do you think the sky is blue, is blue your favorite colour? </p>
</div>
Could I add another yes/no radio button inside of this?
If not how would I go about writing if else statements so I could have different results based on the yes/no selections.
Thanks,
Richerd

With you current code you need to update the nav var
var nav = document.getElementById('nav').getElementsByTagName('input');
http://jsfiddle.net/pjdicke/zudCf/2/

It's valid but you will need to set different name attributes to them and set as disable the radio buttons when not active or the will be serialized on submit. A server side validation will do too.

IE7 & Radio Button .checked issues. Is .defaultChecked the answer?

A quick question which is driving me a little insane. I have some radio buttons on a lightbox that is fired when a user wishes to edit some entered values. This is an old system which I didn't write. Now the problem/solution is relatively easy however when testing in IE7 I've noticed some issues with:
document.getElementById(thisID).checked = true; // thisID is the ID of a radiobutton
Basically the above code doesn't set the checked value on a radio button.
I thought I could sort this by using:
document.getElementById(thisID).defaultChecked = true;
However if I return and change my radio button values previous radio buttons remain selected, as their .defaultChecked status hasn't been updated! I can't control the number of radio buttons as they are generated on the server (as are their IDs) and the values for the radiobuttons are stored on the client until the form is submitted.
Is there a way around the document.getElementById(thisID).checked bug in IE7?

I just had to loop through all the radiobuttons and set the .defaulChecked to false before resetting... damned IE7!

There is an possible duplicate which consists of the same issue in which the checking of the radio button is not working in IE7.
Kindly go through the link Check Here

how do i disable certain elements of a form using a radio button input?

here is the fiddle page:
http://jsfiddle.net/hgcTb/10/
in the form there is a radio button with id = "extra"
i was hoping to do this:
when user clicks that radio button all other inputs are disabled, the only inputs that would be enabled is the radio buttons and the submit/reset buttons, and when user click reset the form should reset to the original form, maybe using javascript?
please give some pointers or samples
EDIT: ive added a function to disable each element but it is giving me errors.

Yes, use javascript to do so.
Add an onclick event to your radio button that disables the other HTML elements. For example:
Here's your radio button:
<input type="radio" name="choice" value="consume" onclick="disableItems(this)" />
Here's your script:
function disableItems(obj) {
var el = document.getElementById('<your HTML element's ID>');
el.disabled = true;
// do this for other HTML elements in your form
}
Regarding Reset, you can attach a similar onclick handler for the RESET button, that enables the controls back (using el.disabled=false).
These are just snippets to get you started, and give you an idea of how to proceed (no spoon-feeding for the exact solution). There may be more code involved based on your form's logic.