How to create radio buttons mutually exclusive with different names?

Question

I have few radio buttons , they belong to same category, but I want to name differently and want them to be mutually exclusive. How do I do that? Based on selected value, I do different action and I can't access them if they have same name. I am writing code in Java.

Answer 1

Why can't you access them if they have the same name? You can add IDs (you should), you can distinguish by value or just count them and use the n-th element.

You should give radiobuttons the same name to make the browser understand they are exclusive.

You could (but should not) hack around this, and give each object a different name. Then add an onSelect/onClick handler for each object, and when the event fires, "uncheck" the other buttons. This is dirty and should be avoided.

Answer 2

Radio buttons require the same name to be mutually exclusive. However, they can have different ID attribute values, if you want to manipulate them individually with JavaScript.

There are lots of ways to get the selected value with jQuery:

<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />


// value of checked input tag of type 'radio'
var selectedValue = $('input[type=radio]:checked').val();

// value of checked input tag having name of 'foo'
var selectedValue = $('input[name=foo]:checked').val();

// value of the first checked radio button, regardless of name
var selectedValue = $('input:checked').val();

Answer 3

If you have to change the name, you can access the DOM and it's elements through JavaScript.

<input type="checkbox" name="X" id="myElement" />

<script>   document.getElementById('myElement').name = 'text'; </script>  

http://www.w3schools.com/JS/js_ex_dom.asp