One of the things that I thought <Input TYPE=radio> had always lacked is that it only allows it to be specified as part of only ONE group - which is dictated by the NAME attribute.
Therefore, with this code
<INPUT TYPE=radio NAME=names VALUE=1>William Tay
<INPUT TYPE=radio NAME=names VALUE=2>William Gates
<INPUT TYPE=radio NAME=names VALUE=3>William Tell
I can do this:
William Tay
William Gates
William Tell
However, if I wanted something with a 2-dimensional twist to it such as something like this:
I will be stuck somewhere in between because while I can select my order of Preferences (in terms of 1, 2, 3) for any of those topics, I cannot prevent other uses from selecting a Preference 1 for more than 1 topic. This kinda distorts the voting statistics as someone may vote a Preference 1 for all topics which is not meant for business functionality intent.
While, there are a few ways to do this, such as using a combination and tweaking of dropdownlists and other <input type>, I had some trouble searching for the same function to be served via a more intuitive Radio Input Type.
So, I decided to write a small javascript snippet to be implemented via the onclick event-handler of the <Input TYPE=radio>. The parameters to be passed into the javascript function are all the same for all the radio buttons so it will be very easy to do this programmatically in your favourite language.
The trick would be to manipuate the VALUE attribute to slot in a second Radio Group name and thereafter, have some javascript code manipuate the other radio buttons. Here is my documentation including the parameters to be passed into the javascript function:
/*
Documentation:
<INPUT TYPE=radio NAME=n1 VALUE=1_1 onclick="javascript:ClickAnotherRadioGroup(this.value,this.name)">
The Value of the Input Type=Radio must be a delimited string
The Value to the left of the pre-defined delimiter is the name of the Second Group Name
This means that while NAME signifies a Radio Group, the x of VALUE=x_actualvalue signifies the Second Radio Group
Eg.
(a) - <INPUT TYPE=radio NAME=n1 VALUE=g1_1 onclick="javascript:ClickAnotherRadioGroup(this.value,this.name)">
(b) - <INPUT TYPE=radio NAME=n1 VALUE=g2_2 onclick="javascript:ClickAnotherRadioGroup(this.value,this.name)">
belong to the same Radio Group (n1)
(c) - <INPUT TYPE=radio NAME=n2 VALUE=g1_1 onclick="javascript:ClickAnotherRadioGroup(this.value,this.name)">
(d) - <INPUT TYPE=radio NAME=n2 VALUE=g2_2 onclick="javascript:ClickAnotherRadioGroup(this.value,this.name)">
belong to the same (but different from above) Radio Group (n2)
However, (a) and (c) belong to the same radio group as well (g1) WHILE (b) and (d) belong to another group (g2)
The Value to the right of the pre-defined delimiter is the ACTUAL VALUE of the Input Type=Radio
Note that if the ACTUAL VALUE of the Input Type=Radio uses the same delimiter, we can change our own delimiter in this function
*/
Now try this with the Javascript implementation:
function ClickAnotherRadioGroup(v,n)
{
var f = document.forms(0);
var n2 = v.split("_")[0]; // Retrieving the second grouped value
for(var i=0; i<f.length; i++)
{
if ((f.elements[i].type == "radio") && (f.elements[i].checked) && (f.elements[i].value.split("_")[0] == n2))
{
var c1 = f.elements[i].value; var c2 = f.elements[i].name;
if ((v == c1) && (n == c2)) {} else
{
f.elements[i].checked = false;
}
}
}
}
Try this now:
I hope this snippet will help someone as much as it has helped me.