What is the default onClick action for a Form Radio Button?

I have an application that sits on IE. Police officers use it in their vehicles to run tags,开发者_运维技巧 get event information etc. I'm making some much needed updates to this application and I've run into a snag with a Radio Button.

For usability, the officers wanted the text and input fields made bigger. When I made them bigger, the Radio buttons obviously did not grow. I found a jQuery alternative at http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/label-only.html I'm using the Label-Only format. Instead of showing an actual radio button, it highlights the label if the option is selected.

Anyway, I have it working on my page, however when I press the buttons, they actually just disappear. The application is a hodge podge of Javascript, VBScript, forms, XML and XSL and so far I've been unable to find an overt call to a script or otherwise that would make the buttons disappear.

So my ultimate question is, what is the default action of a radio button? I'm hoping I can create a new function and call it with the onClick action. Its kind of a last resort and if it doesn't work, I'll have to find an alternative, but I have a feeling I may run into similar issues.

I've posted a demo at http://www.myvigilanttechs.com/Radio/mobInfPA_vehicleinq.htm That is the actual page within the app. The first set of Radio buttons are the real thing, the second set at the bottom were my attempt at fixing by using better formatted code.

Anyone care to take a stab at this one?

Edit

Based on comments on the OP, the radio buttons can be hidden using visibility: hidden. Adding a style rule for .bigButton input in the demo below works as required.

You can use something like the following that adds a label to the radio buttons, then changes the background colour of the label depending on whether the contained radio button is checked or not.

Also, the label increases the target area for the button.

<style type="text/css">

.bigButton {
  border: 1px solid blue;
  padding: 20px;
  display: inline-block;
  font-size: 200%;
}

.bigButton input {
  visibility: hidden;
}

</style>

<form action="">
  <label for="radio0" class="bigButton">Option 0
    <input type="radio" id="radio0" name="option0" onclick="bigFocus(this);">
  </label>
  <br>
  <label for="radio1" class="bigButton">Option 1
    <input type="radio" id="radio1" name="option0" onclick="bigFocus(this);">
  </label>
</form>


<script type="text/javascript">

function bigFocus(el) {
  var els = document.getElementsByName(el.name);
  var i = els.length;
  var node;
  while (i--) {
    node = els[i];
    node.parentNode.style.backgroundColor = node.checked? 'red' : '';
  }
}
</script>

Of course you need to tidy that up for production, it's just to show the general strategy.

Ok, I figured it out. I was sure it was a problem with all the other scripts on the page and I was partially right.

First I'm using 2 different libraries of jQuery. One for tooltips and another for the Radio Buttons. Using the noConflict(true) statement I was able to resolve that part. However, since I had both being initialized in the same function statement, I found the tooltip statement was searching a bit to broadly. It was searching for all input form controls. When I reduced that to text for controls, the Radio buttons began acting properly.

I don't have access to the test laptop right now, but when I do, I will post the code.

Thanks to everyone for their suggestions.