uncheck radio group

C

cerr

Hi There,

I have a bunch of radio groups on a page and would like to uncheck
them all together on button click.
OnClick I trigger this function:

function uncheck(grpnr){
group="grp"+grpnr;
alert("hello!"+"\r\n"+group+"\r\n");
if (document.getElementByName(group)){
alert("Got it!");
}
for (var i=0; i<document.toppings.group.length; i++) {
document.toppings.group.checked = false;
}
}

The radio groups is called "grp4" (with the number incrementing). So i
pass the index number to this function, assemble the group name but
for some reason this doesn't seem to work, any clues what i need to do
differently? I also never get the "Got it!" message...my form tag
looks like this:

<form name="toppings" action="/store/index.php" method="POST">

Thank you for the help!
 
E

Elegie

On 05/11/2011 23:57, cerr wrote :

Hello,
I have a bunch of radio groups on a page and would like to uncheck
them all together on button click.

You can then try and use the following function:

function uncheckAll(form) {
var elements = form.elements;
for(var ii=0; ii<elements.length; ii++) {
if (elements[ii].type == "radio") {
elements[ii].checked = false;
}
}
}

.... calling it while passing the form object, e.g. (for an INPUT element
located in the same FORM as the radio controls):

<input type="button" value="Reset All"
onclick="uncheckAll(this.form);">

Note that it is a good practice to always provide a default radio button
per radio button group, so that the user may select this default value
if he/she wants to manually reset the group. In such case, you would
want to uncheck all radio buttons, except for default ones which would
have to be checked back.
OnClick I trigger this function:

function uncheck(grpnr){
group="grp"+grpnr;
alert("hello!"+"\r\n"+group+"\r\n");
if (document.getElementByName(group)){

------------------------^^-----

You probably mean the "getElementsByName" method, which returns a
collection of all elements bearing the same name?
alert("Got it!");
}
for (var i=0; i<document.toppings.group.length; i++) {

Since "group" is a variable, and that you want to use the value of this
variable, you need to use the square bracket accessor:

document.toppings.elements[group].length
document.toppings.group.checked = false;


and likewise:

document.toppings.elements[group]

<snip>

Also, most browsers come up with a javascript console, which report
javascript errors. Try and find yours: it will give you interesting
information about why and where scripts fail. One should always program
with feedback.

Regards,
Elegie.
 
D

Denis McMahon

Hi There,

I have a bunch of radio groups on a page and would like to uncheck them
all together on button click.
OnClick I trigger this function:

function uncheck(grpnr){
group="grp"+grpnr;
alert("hello!"+"\r\n"+group+"\r\n");
if (document.getElementByName(group)){ alert("Got it!");
}
for (var i=0; i<document.toppings.group.length; i++) {
document.toppings.group.checked = false; }
}

The radio groups is called "grp4" (with the number incrementing). So i
pass the index number to this function, assemble the group name but for
some reason this doesn't seem to work, any clues what i need to do
differently? I also never get the "Got it!" message...my form tag looks
like this:

<form name="toppings" action="/store/index.php" method="POST">

Thank you for the help!


You need to uncheck the buttons, not the groups.

This might work:

function uncheckAllRadioButtonsInDocument()
{
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) if (inputs.type=="radio") inputs
.checked=false;
}

Rgds

Denis McMahon
 
S

Swifty

Note that it is a good practice to always provide a default radio button
per radio button group, so that the user may select this default value
if he/she wants to manually reset the group. In such case, you would
want to uncheck all radio buttons, except for default ones which would
have to be checked back.

If you don't want such a default button (there are cases) then you can
create it, but set it to be invisible, using CSS.

Then, by checking this one, invisible, button, you automatically
uncheck any other one on the group.
 
E

Evertjan.

cerr wrote on 05 nov 2011 in comp.lang.javascript:
I have a bunch of radio groups on a page

Where else?
and would like to uncheck them all together on button click.

This is a wrong idea IMHO.

A radio-group without any checked is strictly illegal and error-prone.

Better make a hidden radio-button that can be checked by javascript.
And no loop is needed.


<form>
<input type='radio' name='a' value='none'
checked style='display:none;' id='aNone'>
<label><input type='radio' name='a' value='1'> 1</label><br>
<label><input type='radio' name='a' value='2'> 2</label><br>
<label><input type='radio' name='a' value='3'> 3</label><br>
</form>

<button onclick = "document.getElementById('aNone').checked = true;">
Uncheck
</button>
 
E

Evertjan.

Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:
cerr wrote on 05 nov 2011 in comp.lang.javascript:


Where else?


This is a wrong idea IMHO.

A radio-group without any checked is strictly illegal and error-prone.

Better make a hidden radio-button that can be checked by javascript.
And no loop is needed.


<form>
<input type='radio' name='a' value='none'
checked style='display:none;' id='aNone'>
<label><input type='radio' name='a' value='1'> 1</label><br>
<label><input type='radio' name='a' value='2'> 2</label><br>
<label><input type='radio' name='a' value='3'> 3</label><br>
</form>

<button onclick = "document.getElementById('aNone').checked = true;">
Uncheck
</button>

Sorry, I now read "bunch of groups":

<button onclick = "document.getElementById('aNone').checked =
document.getElementById('bNone').checked =
document.getElementById('cNone').checked =
document.getElementById('dNone').checked = true;">
Uncheck groups a,b,c,d
</button>
 
E

Evertjan.

Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:
Evertjan. wrote on 06 nov 2011 in comp.lang.javascript:


Sorry, I now read "bunch of groups":

<button onclick = "document.getElementById('aNone').checked =
document.getElementById('bNone').checked =
document.getElementById('cNone').checked =
document.getElementById('dNone').checked = true;">
Uncheck groups a,b,c,d
</button>

Then again, if you have no other radio-inputs with a value of 'none':

<form>
<input type='radio' name='a' value='none'
checked style='display:none;'>
<label><input type='radio' name='a' value='1'> 1</label><br>
<label><input type='radio' name='a' value='2'> 2</label><br>
</form>

<form>
<input type='radio' name='b' value='none'
checked style='display:none;'>
<label><input type='radio' name='b' value='1'> 1</label><br>
<label><input type='radio' name='b' value='2'> 2</label><br>
</form>

<button onclick = "unCheck()">
Uncheck all groups
</button>

<script type='text/javascript'>
function unCheck() {
var allInputs = document.getElementsByTagName('input');
for (var i in allInputs)
if (allInputs.type == 'radio' && allInputs.value == 'none')
allInputs.checked = true;
};
</script>
 
D

Dr J R Stockton

In comp.lang.javascript message <3c81f60b-9264-4083-ba1f-1c87d4636197@q3
5g2000prh.googlegroups.com>, Sat, 5 Nov 2011 15:57:04, cerr
I have a bunch of radio groups on a page and would like to uncheck
them all together on button click.

Add a radiobutton to each group, and check it with your button, which
unchecks the others. IIRC, the new button can be styled to not display.
It could also be marked "none of those".
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top