SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Radio Box Groups, make them mutually exclusive

    Here's the challenge... I have a table of radio buttons, like so:

    Code:
    <table border="0" cellspacing="0" cellpadding="4">
        <tr>
          <td>&nbsp;</td>
          <td>Class 1</td>
          <td>Class 2</td>
          <td>Class 3</td>
          <td>Class 4</td>
          <td>Class 5</td>
        </tr>
        <tr>
          <td>Time1</td>
          <td><p>
            <input type="radio" name="1" id="1" value="1" />
          1_1</p></td>
          <td><p>
            <input type="radio" name="1" id="1" value="2" />
          1_2</p></td>
          <td><p>
            <input type="radio" name="1" id="1" value="3" />
          1_3</p></td>
          <td><p>
            <input type="radio" name="1" id="1" value="4" />
          1_4</p></td>
          <td><p>
            <input name="1" type="radio" id="1" value="5" />
          1_5</p></td>
        </tr>
        <tr>
          <td>Time2</td>
          <td><p>
            <input type="radio" name="2" id="2" value="1" />
          2_1</p></td>
          <td><p>
            <input type="radio" name="2" id="2" value="2" />
          2_2</p></td>
          <td><p>
            <input type="radio" name="2" id="2" value="3" />
          2_3</p></td>
          <td><p>
            <input type="radio" name="2" id="2" value="4" />
          2_4</p></td>
          <td><p>
            <input type="radio" name="2" id="2" value="5" />
          2_5</p></td>
        </tr>
        <tr>
          <td>Time3</td>
          <td><p>
            <input type="radio" name="3" id="3" value="1" />
          3_1</p></td>
          <td><p>
            <input type="radio" name="3" id="3" value="2" />
          3_2</p></td>
          <td><p>
            <input type="radio" name="3" id="3" value="3" />
          3_3</p></td>
          <td><p>
            <input type="radio" name="3" id="3" value="4" />
          3_4</p></td>
          <td><p>
            <input type="radio" name="3" id="3" value="5" />
          3_5</p></td>
        </tr>
        <tr>
          <td>Time4</td>
          <td><p>
            <input type="radio" name="4" id="4" value="1" />
          4_1</p></td>
          <td><p>
            <input type="radio" name="4" id="4" value="2" />
          4_2</p></td>
          <td><p>
            <input type="radio" name="4" id="4" value="3" />
          4_3</p></td>
          <td><p>
            <input type="radio" name="4" id="4" value="4" />
          4_4</p></td>
          <td><p>
            <input type="radio" name="4" id="4" value="5" />
          4_5</p></td>
        </tr>
        <tr>
          <td>Time5</td>
          <td><p>
            <input type="radio" name="5" id="5" value="1" />
          5_1</p></td>
          <td><p>
            <input type="radio" name="5" id="5" value="2" />
          5_2</p></td>
          <td><p>
            <input type="radio" name="5" id="5" value="3" />
          5_3</p></td>
          <td><p>
            <input type="radio" name="5" id="5" value="4" />
          5_4</p></td>
          <td><p>
            <input type="radio" name="5" id="5" value="5" />
          5_5</p></td>
        </tr>
      </table>
    I need to prevent the user from choosing more than one radio button in each row/column. So, the user could choose 1_1, 2_2, 3_3, 4_4, 5_5, but not 1_1, 2_1, 3_1, 4_1, 5_1, etc.

    I found some code here: (at the bottom) http://www.thescripts.com/forum/thread509832.html

    It works great, except when the radio buttons are pre-checked (set dynamically, server-side). Any ideas for a better solution?

    Thanks,
    Glen

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Gothenburg, Sweden
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What should happen if the radio buttons are pre-checked (server side) in a wrong way?

    You could do something like this:

    Code:
    ...
    ...
    <head>
    <script type="text/javascript">
    function initButtons()
    {
    	/* Prepare the radiobuttons with an onclick event */
    	var table  = document.getElementsByTagName('table')[0]; //Instead you could give the table a id value.
    	var aInput = table.getElementsByTagName('input');
    	for(var i = 0; i < aInput.length; i++) {
    		if(aInput[i].type == 'radio') {
    			aInput[i].onclick = function() { getActiveRadioCoords(this); }
    		}
    	}
    }
    
    function getActiveRadioCoords(o)
    {
    	/* Get the clicked radio buttons column and row position */
    	var table  = document.getElementsByTagName('table')[0]; //Instead you could give the table a id value.
    	var aTR = table.getElementsByTagName('tr');
    	var aTD, aRadio;
    
    	for(var row = 0; row < aTR.length; row++) {
    		aTD = aTR[row].getElementsByTagName('td');
    		for(var col = 0; col < aTD.length; col++) {
    			if(aTD[col].getElementsByTagName('input').length) {
    				if(aTD[col].getElementsByTagName('input')[0] == o) uncheckColumnRadios(Array(col, row));
    			}
    		}
    	}
    }
    
    function uncheckColumnRadios(dontUncheck)
    {
    	/* Uncheck all the other radio buttons */
    	var table  = document.getElementsByTagName('table')[0]; //Instead you could give the table a id value.
    	var aTR = table.getElementsByTagName('tr');
    	var aTD, aRadio;
    
    	for(var row = 0; row < aTR.length; row++) {
    		if(row == dontUncheck[1]) continue;
    		aTD = aTR[row].getElementsByTagName('td');
    		for(var col = 0; col < aTD.length; col++) {
    			if(aTD[col].getElementsByTagName('input').length && aTD[col].getElementsByTagName('input')[0].type == 'radio') {
    				if(col == dontUncheck[0]) aTD[col].getElementsByTagName('input')[0].checked = false;
    			}
    		}
    	}
    }
    </script>
    </head>
    
    <body onload="initButtons();">
    <!-- YOUR TABLE -->
    </body>
    ...
    Last edited by Dr.Flink; Nov 14, 2007 at 20:02.

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Outstanding! Thank you very much!

    Glen


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •