Newbie: Selecting default checkbox?

J

J Belly

Hi, all:

I'm hoping mine is a simple problem:

Basically, I have 15 checkboxes, and one of them (default) is
pre-checked when the page is loaded. If the user then selects any of
the 14 other checkboxes listed, how do I get the default one to
automatically uncheck? (To put it another way, if the user selects
all 14 checkboxes and then changes his mind and selects the default
one again, I want the other 14 to be de-selected.)

Thanks for the help!
J
 
M

McKirahan

J Belly said:
Hi, all:

I'm hoping mine is a simple problem:

Basically, I have 15 checkboxes, and one of them (default) is
pre-checked when the page is loaded. If the user then selects any of
the 14 other checkboxes listed, how do I get the default one to
automatically uncheck? (To put it another way, if the user selects
all 14 checkboxes and then changes his mind and selects the default
one again, I want the other 14 to be de-selected.)

Thanks for the help!
J
Click to expand...

You could use radio buttons which automatically handle it but. like you, I
prefer the appearance of a checkbox. Try the following; watch for
word-wrap.

<html>
<head>
<title>checkonly.htm</title>
<script type="text/javascript">
function checkonly(what) {
var form = document.form1;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
}
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<input type="checkbox" name="x0" onclick="checkonly('x0')">
<input type="checkbox" name="x1" onclick="checkonly('x1')">
<input type="checkbox" name="x2" onclick="checkonly('x2')">
</form>
</body>
</html>
 
J

J Belly

McKirahan:

Thanks for the help, but it didn't work. (By the way, the reason I
can't use radio buttons is because I want the user to be able to check
more than one box, while keeping just one of them exclusive.)

Here's the coding:

<SCRIPT LANGUAGE="JavaScript">

function checkonly(0) {
var form = document.fruitform;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.name != 0) {
form.elements.checked = false;
}
}
}
}
</SCRIPT>

....

<FORM NAME="fruitform" ACTION="..." METHOD="POST">

<input type="checkbox" value="1" name="fruit"
onclick="checkonly('1')"> Apples

<input type="checkbox" value="2" name="fruit"
onclick="checkonly('2')"> Oranges

<input type="checkbox" value="3" name="fruit"
onclick="checkonly('3')"> Pears

<input type="checkbox" value="0" name="fruit"
onclick="checkonly('0')"> No Answer


Again, to clarify my objective, I want users to be able to check
either a combination of values 1-3, OR just be able to check 'No
Answer' (which will then automatically uncheck any of the other
boxes).

Thanks again,
J


J Belly said:
Hi, all:

I'm hoping mine is a simple problem:

Basically, I have 15 checkboxes, and one of them (default) is
pre-checked when the page is loaded. If the user then selects any of
the 14 other checkboxes listed, how do I get the default one to
automatically uncheck? (To put it another way, if the user selects
all 14 checkboxes and then changes his mind and selects the default
one again, I want the other 14 to be de-selected.)

Thanks for the help!
J
Click to expand...

You could use radio buttons which automatically handle it but. like you, I
prefer the appearance of a checkbox. Try the following; watch for
word-wrap.

<html>
<head>
<title>checkonly.htm</title>
<script type="text/javascript">
function checkonly(what) {
var form = document.form1;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
}
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<input type="checkbox" name="x0" onclick="checkonly('x0')">
<input type="checkbox" name="x1" onclick="checkonly('x1')">
<input type="checkbox" name="x2" onclick="checkonly('x2')">
</form>
</body>
</html>
Click to expand...
 
M

McKirahan

J Belly said:
McKirahan:

Thanks for the help, but it didn't work. (By the way, the reason I
can't use radio buttons is because I want the user to be able to check
more than one box, while keeping just one of them exclusive.)

Here's the coding:

<SCRIPT LANGUAGE="JavaScript">

function checkonly(0) {
var form = document.fruitform;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.name != 0) {
form.elements.checked = false;
}
}
}
}
</SCRIPT>

...

<FORM NAME="fruitform" ACTION="..." METHOD="POST">

<input type="checkbox" value="1" name="fruit"
onclick="checkonly('1')"> Apples

<input type="checkbox" value="2" name="fruit"
onclick="checkonly('2')"> Oranges

<input type="checkbox" value="3" name="fruit"
onclick="checkonly('3')"> Pears

<input type="checkbox" value="0" name="fruit"
onclick="checkonly('0')"> No Answer


Again, to clarify my objective, I want users to be able to check
either a combination of values 1-3, OR just be able to check 'No
Answer' (which will then automatically uncheck any of the other
boxes).

Thanks again,
J
Click to expand...


[snip]

Tyr this:

<html>
<head>
<title>uncheck.htm</title>
<script type="text/javascript">
function checkonly(what) {
var form = document.fruitform;
if (what == 0) {
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.value != "0") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
}
}
}
}
</script>
</head>
<body>
<form name="fruitform" action="..." method="post">
<input type="checkbox" value="1" name="fruit"
onclick="checkonly('1')"> Apples
<input type="checkbox" value="2" name="fruit"
onclick="checkonly('2')"> Oranges
<input type="checkbox" value="3" name="fruit"
onclick="checkonly('3')"> Pears
<input type="checkbox" value="0" name="fruit"
onclick="checkonly('0')"> No Answer
</form>
</body>
</html>
 
J

J Belly

McKirahan:

Well, it's partly working...

If any of the checkboxes (aside from 'No Answer') are checked, and
then I check the 'No Answer' box, the other ones automatically uncheck
(which is what I want).

But if I first have the 'No Answer' box checked, and then I try
selecting any of the other boxes, the 'No Answer' box still remains
checked (whereas I need it to be unchecked).

Any ideas?

Thanks,
J
 
M

McKirahan

J Belly said:
McKirahan:

Well, it's partly working...

If any of the checkboxes (aside from 'No Answer') are checked, and
then I check the 'No Answer' box, the other ones automatically uncheck
(which is what I want).

But if I first have the 'No Answer' box checked, and then I try
selecting any of the other boxes, the 'No Answer' box still remains
checked (whereas I need it to be unchecked).

Any ideas?

Thanks,
J
Click to expand...

[snip]

Try this though I only tested it under IE.

<html>
<head>
<title>unchecks.htm</title>
<script type="text/javascript">
function checkonly(what) {
var form = document.fruitform;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (what == 0) {
if (form.elements.value != "0") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
} else {
if (form.elements.value == "0") {
form.elements.checked = false;
}
}
}
}
}
</script>
</head>
<body>
<form name="fruitform" action="..." method="post">
<input type="checkbox" value="1" name="fruit" onclick="checkonly('1')">
Apples
<input type="checkbox" value="2" name="fruit" onclick="checkonly('2')">
Oranges
<input type="checkbox" value="3" name="fruit" onclick="checkonly('3')">
Pears
<input type="checkbox" value="0" name="fruit" onclick="checkonly('0')"> No
Answer
</form>
</body>
</html>
 
J

J Belly

It works!! But.....I've run into one tiny snag...

Within the same form, I have 4 other sections/questions, each having a
'No Answer' checkbox. So when I used your script, and tried selecting
a 'No Answer' in one section, all the other selections I had made
relating to the other questions got unchecked.

Is there an easy way to fix (and still keep everything in one form)?

Thank you VERY MUCH for the help so far,
J


J Belly said:
McKirahan:

Well, it's partly working...

If any of the checkboxes (aside from 'No Answer') are checked, and
then I check the 'No Answer' box, the other ones automatically uncheck
(which is what I want).

But if I first have the 'No Answer' box checked, and then I try
selecting any of the other boxes, the 'No Answer' box still remains
checked (whereas I need it to be unchecked).

Any ideas?

Thanks,
J
Click to expand...

[snip]

Try this though I only tested it under IE.

<html>
<head>
<title>unchecks.htm</title>
<script type="text/javascript">
function checkonly(what) {
var form = document.fruitform;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (what == 0) {
if (form.elements.value != "0") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
} else {
if (form.elements.value == "0") {
form.elements.checked = false;
}
}
}
}
}
</script>
</head>
<body>
<form name="fruitform" action="..." method="post">
<input type="checkbox" value="1" name="fruit" onclick="checkonly('1')">
Apples
<input type="checkbox" value="2" name="fruit" onclick="checkonly('2')">
Oranges
<input type="checkbox" value="3" name="fruit" onclick="checkonly('3')">
Pears
<input type="checkbox" value="0" name="fruit" onclick="checkonly('0')"> No
Answer
</form>
</body>
</html>
Click to expand...
 
M

Michael Winter

[snip]
Within the same form, I have 4 other sections/questions, each having a
'No Answer' checkbox. So when I used your script, and tried selecting a
'No Answer' in one section, all the other selections I had made relating
to the other questions got unchecked.

Is there an easy way to fix (and still keep everything in one form)?
Click to expand...

It depends on the structure of your form. Assuming that all checkboxes
within a particular group share the same name, but these separate sections
use different group names (see my example), there's no problem at all.

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/belly/checkboxes.html>

As I say in the comments, the current code assumes that the "No Answer"
option is the first checkbox in each group. If you place it last, you need
to uncomment the four lines prefixed with single-line comment delimiters
(//) and delete (or comment-out) the line below each of them.

The code is almost self-contained[1]. All you need to do is (repeating
some of the above):

1) Ensure that each checkbox within a group share exactly the same
name. Related checkboxes should anyway, so this shouldn't be an
issue.
2) Ensure that no two groups use the same name. Again, this
shouldn't be an issue.
3) Add the intrinsic event listener

onclick="setDefault(this);"

to each checkbox. I would have preferred using the change event,
but IE doesn't support that in the way I think it should.

The page in the URL above has been tested with:

IE6; Opera 7.54; Mozilla 1.0 and 1.73; Netscape 4.77 and 7.2;
Mozilla Firefox 0.9.3

and works as expected in all of them. I define "works" as:

1) Selecting the first checkbox in each group should uncheck all
other boxes in that group.
2) Selecting any checkbox, other than the first, should ensure that
the first box becomes unchecked.
3) Multiple checkboxes, excluding the first, can be checked at the
same time.

The commented code behaves the same way, except "first" becomes "last" in
the description above.

The final point to note in all of this is to make sure that you check the
values on the server. Don't rely solely on Javascript for validation if
you can help it.

[snipped top-post]

Hope that helps,
Mike


[1] I'd call it truly self-contained if it added the necessary event
handlers to the HTML itself, but that would be difficult without seeing
your page.
 
M

McKirahan

J Belly said:
It works!! But.....I've run into one tiny snag...

Within the same form, I have 4 other sections/questions, each having a
'No Answer' checkbox. So when I used your script, and tried selecting
a 'No Answer' in one section, all the other selections I had made
relating to the other questions got unchecked.

Is there an easy way to fix (and still keep everything in one form)?

Thank you VERY MUCH for the help so far,
J
Click to expand...

[snip]

<html>
<head>
<title>uncheckz.htm</title>
<script type="text/javascript">
function checkonly(ques,what) {
var form = document.fruitform;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.name == ques) {
if (what == 0) {
if (form.elements.value != "0") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
} else {
if (form.elements.value == "0") {
form.elements.checked = false;
}
}
}
}
}
}
</script>
</head>
<body>
<form name="fruitform" action="..." method="post">
<input type="checkbox" value="1" name="fruit1"
onclick="checkonly('fruit1',1)"> Apples
<input type="checkbox" value="2" name="fruit1"
onclick="checkonly('fruit1',2)"> Oranges
<input type="checkbox" value="3" name="fruit1"
onclick="checkonly('fruit1',3)"> Pears
<input type="checkbox" value="0" name="fruit1"
onclick="checkonly('fruit1',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit2"
onclick="checkonly('fruit2',1)"> Apples
<input type="checkbox" value="2" name="fruit2"
onclick="checkonly('fruit2',2)"> Oranges
<input type="checkbox" value="3" name="fruit2"
onclick="checkonly('fruit2',3)"> Pears
<input type="checkbox" value="0" name="fruit2"
onclick="checkonly('fruit2',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit3"
onclick="checkonly('fruit3',1)"> Apples
<input type="checkbox" value="2" name="fruit3"
onclick="checkonly('fruit3',2)"> Oranges
<input type="checkbox" value="3" name="fruit3"
onclick="checkonly('fruit3',3)"> Pears
<input type="checkbox" value="0" name="fruit3"
onclick="checkonly('fruit3',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit4"
onclick="checkonly('fruit4',1)"> Apples
<input type="checkbox" value="2" name="fruit4"
onclick="checkonly('fruit4',2)"> Oranges
<input type="checkbox" value="3" name="fruit4"
onclick="checkonly('fruit4',3)"> Pears
<input type="checkbox" value="0" name="fruit4"
onclick="checkonly('fruit4',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit5"
onclick="checkonly('fruit5',1)"> Apples
<input type="checkbox" value="2" name="fruit5"
onclick="checkonly('fruit5',2)"> Oranges
<input type="checkbox" value="3" name="fruit5"
onclick="checkonly('fruit5',3)"> Pears
<input type="checkbox" value="0" name="fruit5"
onclick="checkonly('fruit5',0)"> No Answer
</form>
</body>
</html>
 
O

Oscar Monteiro

Simple , indeed in you HTML code where you have a "checkbox" button put a
"radio" button instead.
That option let you select only one of the fifhteen items .
 
M

McKirahan

Oscar Monteiro said:
Simple , indeed in you HTML code where you have a "checkbox" button put a
"radio" button instead.
That option let you select only one of the fifhteen items .
Click to expand...

"(By the way, the reason I can't use radio buttons is because I want the
user to be able to check
more than one box, while keeping just one of them exclusive.)"

-- J Belly (Monday, September 20, 2004 2:36 PM)
 
J

J Belly

McKirahan:

THAT WORKS PERFECTLY!!! Thank you! Thank you! Thank you!

I just really can't thank you enough for all your help. My knowledge
of javascript is pretty much just cut-n-paste, so I was almost gonna
give up on offering this 'No Answer' feature because it just seemed
way too complicated to me. But now my Web page seems totally
professional :)

Again, THANK YOU VERY MUCH for sticking with me and giving me this
perfect solution. I truly appreciate it!

Take care,
J



J Belly said:
It works!! But.....I've run into one tiny snag...

Within the same form, I have 4 other sections/questions, each having a
'No Answer' checkbox. So when I used your script, and tried selecting
a 'No Answer' in one section, all the other selections I had made
relating to the other questions got unchecked.

Is there an easy way to fix (and still keep everything in one form)?

Thank you VERY MUCH for the help so far,
J
Click to expand...

[snip]

<html>
<head>
<title>uncheckz.htm</title>
<script type="text/javascript">
function checkonly(ques,what) {
var form = document.fruitform;
for (var i=0; i<form.elements.length; i++) {
if (form.elements.type == "checkbox") {
if (form.elements.name == ques) {
if (what == 0) {
if (form.elements.value != "0") {
if (form.elements.name != what) {
form.elements.checked = false;
}
}
} else {
if (form.elements.value == "0") {
form.elements.checked = false;
}
}
}
}
}
}
</script>
</head>
<body>
<form name="fruitform" action="..." method="post">
<input type="checkbox" value="1" name="fruit1"
onclick="checkonly('fruit1',1)"> Apples
<input type="checkbox" value="2" name="fruit1"
onclick="checkonly('fruit1',2)"> Oranges
<input type="checkbox" value="3" name="fruit1"
onclick="checkonly('fruit1',3)"> Pears
<input type="checkbox" value="0" name="fruit1"
onclick="checkonly('fruit1',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit2"
onclick="checkonly('fruit2',1)"> Apples
<input type="checkbox" value="2" name="fruit2"
onclick="checkonly('fruit2',2)"> Oranges
<input type="checkbox" value="3" name="fruit2"
onclick="checkonly('fruit2',3)"> Pears
<input type="checkbox" value="0" name="fruit2"
onclick="checkonly('fruit2',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit3"
onclick="checkonly('fruit3',1)"> Apples
<input type="checkbox" value="2" name="fruit3"
onclick="checkonly('fruit3',2)"> Oranges
<input type="checkbox" value="3" name="fruit3"
onclick="checkonly('fruit3',3)"> Pears
<input type="checkbox" value="0" name="fruit3"
onclick="checkonly('fruit3',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit4"
onclick="checkonly('fruit4',1)"> Apples
<input type="checkbox" value="2" name="fruit4"
onclick="checkonly('fruit4',2)"> Oranges
<input type="checkbox" value="3" name="fruit4"
onclick="checkonly('fruit4',3)"> Pears
<input type="checkbox" value="0" name="fruit4"
onclick="checkonly('fruit4',0)"> No Answer
<br>
<input type="checkbox" value="1" name="fruit5"
onclick="checkonly('fruit5',1)"> Apples
<input type="checkbox" value="2" name="fruit5"
onclick="checkonly('fruit5',2)"> Oranges
<input type="checkbox" value="3" name="fruit5"
onclick="checkonly('fruit5',3)"> Pears
<input type="checkbox" value="0" name="fruit5"
onclick="checkonly('fruit5',0)"> No Answer
</form>
</body>
</html>
Click to expand...
 
J

J Belly

Michael:

Thank you for your detailed explanation and the great URL example.

I was able to use the other poster's (McKirahan's) script, and it
works perfectly for me.

A moot point, but just to let you know: the placement of my 'No
Answer' box is somewhat disorganized because in one section, it's
listed at the end, and in others, it's listed second or third from the
end (actually, I'm using multiple rows and columns, and because each
checkbox has its own cell, I'm not really sure where the "end" is).

I appreciate your advice about not relying on javascript as the only
form of validation. I wasn't sure if I should spend the time to code
a server-side validation, but I guess it wouldn't hurt.

Thanks again for your help.

J



[snip]
Within the same form, I have 4 other sections/questions, each having a
'No Answer' checkbox. So when I used your script, and tried selecting a
'No Answer' in one section, all the other selections I had made relating
to the other questions got unchecked.

Is there an easy way to fix (and still keep everything in one form)?
Click to expand...

It depends on the structure of your form. Assuming that all checkboxes
within a particular group share the same name, but these separate sections
use different group names (see my example), there's no problem at all.

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/belly/checkboxes.html>

As I say in the comments, the current code assumes that the "No Answer"
option is the first checkbox in each group. If you place it last, you need
to uncomment the four lines prefixed with single-line comment delimiters
(//) and delete (or comment-out) the line below each of them.

The code is almost self-contained[1]. All you need to do is (repeating
some of the above):

1) Ensure that each checkbox within a group share exactly the same
name. Related checkboxes should anyway, so this shouldn't be an
issue.
2) Ensure that no two groups use the same name. Again, this
shouldn't be an issue.
3) Add the intrinsic event listener

onclick="setDefault(this);"

to each checkbox. I would have preferred using the change event,
but IE doesn't support that in the way I think it should.

The page in the URL above has been tested with:

IE6; Opera 7.54; Mozilla 1.0 and 1.73; Netscape 4.77 and 7.2;
Mozilla Firefox 0.9.3

and works as expected in all of them. I define "works" as:

1) Selecting the first checkbox in each group should uncheck all
other boxes in that group.
2) Selecting any checkbox, other than the first, should ensure that
the first box becomes unchecked.
3) Multiple checkboxes, excluding the first, can be checked at the
same time.

The commented code behaves the same way, except "first" becomes "last" in
the description above.

The final point to note in all of this is to make sure that you check the
values on the server. Don't rely solely on Javascript for validation if
you can help it.

[snipped top-post]

Hope that helps,
Mike


[1] I'd call it truly self-contained if it added the necessary event
handlers to the HTML itself, but that would be difficult without seeing
your page.
Click to expand...
 
M

McKirahan

Ravichandran J.V. said:
Use the CheckBoxList control.

with regards,


J.V.Ravichandran
Click to expand...

CheckBoxList Control
http://www.w3schools.com/aspnet/control_checkboxlist.asp
The CheckBoxList control is used to create a multi-selection check box
group.


..NET Framework Class Library
CheckBoxList Class
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/
frlrfsystemwebuiwebcontrolscheckboxlistclasstopic.asp


Using ASP.NET CheckBoxList Control
http://www.c-sharpcorner.com/asp/Controls/CheckBoxListControlPSD.asp
 

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

Similar Threads

Problem with a login script, SESSION user rights and put this together so it works with the other pages and MySQL. Code examples. 2
Newbie: checkbox problem? 0
[C Language] Need help transferring Linux CodeBlocks Project to Windows CodeBlocks Project 1
Checkbox Problem 7
Checkbox problem - checkboxes submitting that are unchecked 4
How to check all the checkboxes if checkbox name is 'name[]' 9
Selecting multiple checkboxes with a single checkbox. 1
Yet another newb checkbox question 0

Members online

No members online now.
Total: 30 (members: 1, guests: 29)
Robots: 425

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top