Clearing one group of radio buttons (Javascript) (Resolved)

  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Hi all

I have groups of two or three radio buttons, and all buttons in a group have the same name (eg. 'option4colour').

How can I use javascript to clear a group of radio buttons? I've tried:

Code: [ Select ]
document.form_lens_config.option4colour.checked = false

but that doesn't work.

Many thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Thought I would add that resetting the whole form isn't an option, as other user selections need to remain.
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

try: document.form_lens_config.option4colour.value = 0

j/k :D

Code: [ Select ]
<hml>
<head>
<script language="JavaScript" type="text/javascript">
function clearRB(buttonGroup)
{
  for (i=0; i < buttonGroup.length; i++) {
 
    if (buttonGroup[i].checked == true) { // if a button in group is checked,
          buttonGroup[i].checked = false;  // uncheck it
      }
     
  }  
}
</script>
</head>
<body>
<form name="clearIt">
<table>
<tr>
<td>
<input type="radio" name="sweets">Ice Cream<br>
<input type="radio" name="sweets">Candy Bars<br>
<input type="radio" name="sweets">Milk Shakes<br>
<input type="button" name="clear" value="clear" onClick="clearRB(document.clearIt.sweets)" />
</td>
</tr>
</table>
</form>
</body>
</html>
  1. <hml>
  2. <head>
  3. <script language="JavaScript" type="text/javascript">
  4. function clearRB(buttonGroup)
  5. {
  6.   for (i=0; i < buttonGroup.length; i++) {
  7.  
  8.     if (buttonGroup[i].checked == true) { // if a button in group is checked,
  9.           buttonGroup[i].checked = false;  // uncheck it
  10.       }
  11.      
  12.   }  
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <form name="clearIt">
  18. <table>
  19. <tr>
  20. <td>
  21. <input type="radio" name="sweets">Ice Cream<br>
  22. <input type="radio" name="sweets">Candy Bars<br>
  23. <input type="radio" name="sweets">Milk Shakes<br>
  24. <input type="button" name="clear" value="clear" onClick="clearRB(document.clearIt.sweets)" />
  25. </td>
  26. </tr>
  27. </table>
  28. </form>
  29. </body>
  30. </html>
  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Thanks IceCold

Ironically, in researching certain aspects of that code you posted, I found a page containing similar/the same code:

http://jennifermadden.com/javascript/lo ... Clear.html

:) Cheers!
  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Thought I'd be able to complete this myself, but I'm stuck again. :cry:

I've used the information and examples found earlier to get the tick boxes working properly, but can't quite get the radio buttons to work as expected.

Here is a static version of the page online (it's actually PHP-based but I've saved a copy of the page from Firefox). There are some minor styling issues because the latest stylesheet hasn't been uploaded, but the javascript works as it does locally.

Here are the relevant sections.

The main javascript function
Code: [ Select ]
<script language="JavaScript" type="text/JavaScript">
function selectLensOption(optionName) {
    optionName.checked = true; // Checks tick box
}
function clearLensOption(optionName) {
    optionName.checked = false; // Unchecks tick box
    var i=0;
    for (i=0; i < optionName.length; i++) { // Runs through all radio buttons
        if (optionName[i].checked == true) { // (If radio button is checked)
            optionName[i].checked = false; // Unchecks radio button
        }
    }
}
</script>
  1. <script language="JavaScript" type="text/JavaScript">
  2. function selectLensOption(optionName) {
  3.     optionName.checked = true; // Checks tick box
  4. }
  5. function clearLensOption(optionName) {
  6.     optionName.checked = false; // Unchecks tick box
  7.     var i=0;
  8.     for (i=0; i < optionName.length; i++) { // Runs through all radio buttons
  9.         if (optionName[i].checked == true) { // (If radio button is checked)
  10.             optionName[i].checked = false; // Unchecks radio button
  11.         }
  12.     }
  13. }
  14. </script>


An example tickbox (calls to clearLensOption function successfully clears other tickboxes but does not clear other radio buttons)
Code: [ Select ]
<input type="checkbox"
name="option6"
value="1"
onChange="if (this.checked) {
   clearLensOption(document.form_lens_config.option2);
   clearLensOption(document.form_lens_config.option3);
   clearLensOption(document.form_lens_config.option4);
   clearLensOption(document.form_lens_config.option5);
}"
>
  1. <input type="checkbox"
  2. name="option6"
  3. value="1"
  4. onChange="if (this.checked) {
  5.    clearLensOption(document.form_lens_config.option2);
  6.    clearLensOption(document.form_lens_config.option3);
  7.    clearLensOption(document.form_lens_config.option4);
  8.    clearLensOption(document.form_lens_config.option5);
  9. }"
  10. >


An example colour radio button (call to selectLensOption function successfully selects correct tickbox, but calls to clearLensOption function do not clear other radio buttons)
Code: [ Select ]
<input type="radio"
name="option6colour"
value="1"
onChange="if (this.checked) {
   selectLensOption(document.form_lens_config.option6);
   clearLensOption(document.form_lens_config.option2);
   clearLensOption(document.form_lens_config.option2colour);
   clearLensOption(document.form_lens_config.option3);
   clearLensOption(document.form_lens_config.option3colour);
   clearLensOption(document.form_lens_config.option4);
   clearLensOption(document.form_lens_config.option4colour);
   clearLensOption(document.form_lens_config.option5);
   clearLensOption(document.form_lens_config.option5colour);
}"
>
  1. <input type="radio"
  2. name="option6colour"
  3. value="1"
  4. onChange="if (this.checked) {
  5.    selectLensOption(document.form_lens_config.option6);
  6.    clearLensOption(document.form_lens_config.option2);
  7.    clearLensOption(document.form_lens_config.option2colour);
  8.    clearLensOption(document.form_lens_config.option3);
  9.    clearLensOption(document.form_lens_config.option3colour);
  10.    clearLensOption(document.form_lens_config.option4);
  11.    clearLensOption(document.form_lens_config.option4colour);
  12.    clearLensOption(document.form_lens_config.option5);
  13.    clearLensOption(document.form_lens_config.option5colour);
  14. }"
  15. >


I've enabled strict Javascript reporting in the Firefox Developer toolbar, and the javascript console shows:

(Edit: removing errors, please see updated errors in post below.)

I wondered if calling the clearLensOption function with an option which doesn't have any colour radio buttons was the cause, but I've tried removing those calls (2 and 3) without success.

Based on what works and what doesn't, I guess it's something to do with the loop in the clearLensOption function. If someone could point out where I'm going wrong I would really appreciate it. Thanks.
  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Have added missing calls to clearLensOption function to clear actual tickboxes (optionx) and not just the radio buttons (optionxcolour) when a radio button is selected, but it's still not working properly.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

IceCold wrote:
Code: [ Select ]
    if (buttonGroup[i].checked == true) { // if a button in group is checked,
          buttonGroup[i].checked = false;  // uncheck it
      }
  1.     if (buttonGroup[i].checked == true) { // if a button in group is checked,
  2.           buttonGroup[i].checked = false;  // uncheck it
  3.       }


What's the use of checking if it's checked?
  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Sam Hughes wrote:
What's the use of checking if it's checked?

Good point, but have tried remarking out the if control structure and nothing changes.

Here are the errors/warnings I get in the javascript panel when testing:

After ticking the 'option6' tickbox

Image

Line 41 is:

Code: [ Select ]
  for (i=0; i < optionName.length; i++) { // Runs through all radio buttons


After selecting one of the 'option6colour' radio buttons

Image

Line 6 is:

Code: [ Select ]
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

(Which has nothing to do with the javascript. :? )
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

ooookkk
u had to check when the one of CheckBoxes is unchecked. That`s what u missed.
i'll give u the code for one of them (u`ll find it in your source code) ... the way it should be. Also i made some modifications to the java script function ... u had errors
Code: [ Select ]
<script language="JavaScript" type="text/JavaScript">
function selectLensOption(optionName) {
    optionName.checked = true; // Checks tick box                
}
function clearLensOption(optionName) {
    optionName.checked = false; // Unchecks tick box
}
function clearRadioBox(optionName)
{
    var i=0;
    for (i=0; i < optionName.length; i++) { // Runs through all radio buttons
        if (optionName[i].checked == true) { // (If radio button is checked)
            optionName[i].checked = false; // Unchecks radio button
        }
    }
}
</script>
  1. <script language="JavaScript" type="text/JavaScript">
  2. function selectLensOption(optionName) {
  3.     optionName.checked = true; // Checks tick box                
  4. }
  5. function clearLensOption(optionName) {
  6.     optionName.checked = false; // Unchecks tick box
  7. }
  8. function clearRadioBox(optionName)
  9. {
  10.     var i=0;
  11.     for (i=0; i < optionName.length; i++) { // Runs through all radio buttons
  12.         if (optionName[i].checked == true) { // (If radio button is checked)
  13.             optionName[i].checked = false; // Unchecks radio button
  14.         }
  15.     }
  16. }
  17. </script>

Code 2 ( change the code for the other checkboxes, according to this) :
Code: [ Select ]
<!-- Option -->
<span class="lensoption">
<h4>
<label>
<input type="checkbox"
name="option5"
value="1"
onChange="if (this.checked){

        clearLensOption(document.form_lens_config.option2);
        clearLensOption(document.form_lens_config.option3);
        clearLensOption(document.form_lens_config.option4);
        clearLensOption(document.form_lens_config.option6);
        document.form_lens_config.option5colour[0].checked = true; // automatically check the first radio button
    }
    else
    {
        // alert('not checked'); // -> just for debug :p
        clearRadioBox(document.form_lens_config.option5colour);
    }"
>
Tinted (light)<span class="configcost">
+&pound;5</span>
</label>
</h4>
  1. <!-- Option -->
  2. <span class="lensoption">
  3. <h4>
  4. <label>
  5. <input type="checkbox"
  6. name="option5"
  7. value="1"
  8. onChange="if (this.checked){
  9.         clearLensOption(document.form_lens_config.option2);
  10.         clearLensOption(document.form_lens_config.option3);
  11.         clearLensOption(document.form_lens_config.option4);
  12.         clearLensOption(document.form_lens_config.option6);
  13.         document.form_lens_config.option5colour[0].checked = true; // automatically check the first radio button
  14.     }
  15.     else
  16.     {
  17.         // alert('not checked'); // -> just for debug :p
  18.         clearRadioBox(document.form_lens_config.option5colour);
  19.     }"
  20. >
  21. Tinted (light)<span class="configcost">
  22. +&pound;5</span>
  23. </label>
  24. </h4>
  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

Problem solved! Thanks for the help, especially you Ice.

However, the issue was that my Javascript was trying to uncheck radio buttons which weren't there (because option 2 didn't have any colour radio buttons). So I didn't have to check whether radio buttons were checked, but rather that they existed.

So my code now looks like this:

Code: [ Select ]
<script language="JavaScript" type="text/JavaScript">
function changeLensTickbox(tickboxName,state) {
    tickboxName.checked = state; // Checks tick box      
}
function clearLensRadiobuttons(radioName) {
    var i=0;
    for (i=0; i < radioName.length; i++) { // Runs through all radio buttons
        radioName[i].checked = false; // Unchecks radio button
    }
}
function selectRadiobutton(radioName) {
    radioName[0].checked = true; // Checks tick box
}
</script>
  1. <script language="JavaScript" type="text/JavaScript">
  2. function changeLensTickbox(tickboxName,state) {
  3.     tickboxName.checked = state; // Checks tick box      
  4. }
  5. function clearLensRadiobuttons(radioName) {
  6.     var i=0;
  7.     for (i=0; i < radioName.length; i++) { // Runs through all radio buttons
  8.         radioName[i].checked = false; // Unchecks radio button
  9.     }
  10. }
  11. function selectRadiobutton(radioName) {
  12.     radioName[0].checked = true; // Checks tick box
  13. }
  14. </script>


Code: [ Select ]
<input type="checkbox"
name="option6"
value="1"
onChange="if (this.checked) {

    if (document.form_lens_config.option6colour) {
        selectRadiobutton(document.form_lens_config.option6colour);
    }

                changeLensTickbox(document.form_lens_config.option2,false);
            if (document.form_lens_config.option2colour) {
                clearLensRadiobuttons(document.form_lens_config.option2colour);
            }
                    changeLensTickbox(document.form_lens_config.option3,false);
            if (document.form_lens_config.option3colour) {
                clearLensRadiobuttons(document.form_lens_config.option3colour);
            }
                    changeLensTickbox(document.form_lens_config.option4,false);
            if (document.form_lens_config.option4colour) {
                clearLensRadiobuttons(document.form_lens_config.option4colour);
            }
                    changeLensTickbox(document.form_lens_config.option5,false);
            if (document.form_lens_config.option5colour) {
                clearLensRadiobuttons(document.form_lens_config.option5colour);
            }
        }

if (this.checked == false) {
    if (document.form_lens_config.option6colour) {
        clearLensRadiobuttons(document.form_lens_config.option6colour);
    }
}"
>
  1. <input type="checkbox"
  2. name="option6"
  3. value="1"
  4. onChange="if (this.checked) {
  5.     if (document.form_lens_config.option6colour) {
  6.         selectRadiobutton(document.form_lens_config.option6colour);
  7.     }
  8.                 changeLensTickbox(document.form_lens_config.option2,false);
  9.             if (document.form_lens_config.option2colour) {
  10.                 clearLensRadiobuttons(document.form_lens_config.option2colour);
  11.             }
  12.                     changeLensTickbox(document.form_lens_config.option3,false);
  13.             if (document.form_lens_config.option3colour) {
  14.                 clearLensRadiobuttons(document.form_lens_config.option3colour);
  15.             }
  16.                     changeLensTickbox(document.form_lens_config.option4,false);
  17.             if (document.form_lens_config.option4colour) {
  18.                 clearLensRadiobuttons(document.form_lens_config.option4colour);
  19.             }
  20.                     changeLensTickbox(document.form_lens_config.option5,false);
  21.             if (document.form_lens_config.option5colour) {
  22.                 clearLensRadiobuttons(document.form_lens_config.option5colour);
  23.             }
  24.         }
  25. if (this.checked == false) {
  26.     if (document.form_lens_config.option6colour) {
  27.         clearLensRadiobuttons(document.form_lens_config.option6colour);
  28.     }
  29. }"
  30. >


Code: [ Select ]
<input type="radio"
name="option6colour"
value="1"
onChange="if (this.checked) {

    changeLensTickbox(document.form_lens_config.option6,true);
    
                changeLensTickbox(document.form_lens_config.option2,false);
            if (document.form_lens_config.option2colour) {
                clearLensRadiobuttons(document.form_lens_config.option2colour);
            }
                    changeLensTickbox(document.form_lens_config.option3,false);
            if (document.form_lens_config.option3colour) {
                clearLensRadiobuttons(document.form_lens_config.option3colour);
            }
                    changeLensTickbox(document.form_lens_config.option4,false);
            if (document.form_lens_config.option4colour) {
                clearLensRadiobuttons(document.form_lens_config.option4colour);
            }
                    changeLensTickbox(document.form_lens_config.option5,false);
            if (document.form_lens_config.option5colour) {
                clearLensRadiobuttons(document.form_lens_config.option5colour);
            }
        }"
>
  1. <input type="radio"
  2. name="option6colour"
  3. value="1"
  4. onChange="if (this.checked) {
  5.     changeLensTickbox(document.form_lens_config.option6,true);
  6.     
  7.                 changeLensTickbox(document.form_lens_config.option2,false);
  8.             if (document.form_lens_config.option2colour) {
  9.                 clearLensRadiobuttons(document.form_lens_config.option2colour);
  10.             }
  11.                     changeLensTickbox(document.form_lens_config.option3,false);
  12.             if (document.form_lens_config.option3colour) {
  13.                 clearLensRadiobuttons(document.form_lens_config.option3colour);
  14.             }
  15.                     changeLensTickbox(document.form_lens_config.option4,false);
  16.             if (document.form_lens_config.option4colour) {
  17.                 clearLensRadiobuttons(document.form_lens_config.option4colour);
  18.             }
  19.                     changeLensTickbox(document.form_lens_config.option5,false);
  20.             if (document.form_lens_config.option5colour) {
  21.                 clearLensRadiobuttons(document.form_lens_config.option5colour);
  22.             }
  23.         }"
  24. >


Thanks again! :D
  • nashville
  • Born
  • Born
  • nashville
  • Posts: 1

Post 3+ Months Ago

Here's how I did it targeting IDs instead of names. Works "vice-versa" too. Works in Firefox on Mac. I have not tested it elsewhere:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>

<script type='text/javascript' src='jquery-1.7.1.js'></script>


<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('input[id=sub]').on('click', function() {
$('input[id=main1]').attr('checked', false);
});

});//]]>

</script>


<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('input[id=main1]').on('click', function() {
$('input[id=sub]').attr('checked', false);
});

});//]]>

</script>

</head>
<body>
<input type="radio" id="main1" name="asdf" value="a">a
<input type="radio" id="main1" name="asdf" value="b">b
<input type="radio" id="main1" name="asdf" value="c">c

<br><br>
<input type="radio" id="sub" name="whatever">whatever

</body>


</html>

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 140 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.