Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Newbie: Selecting default checkbox?

Reply
Thread Tools

Newbie: Selecting default checkbox?

 
 
J Belly
Guest
Posts: n/a
 
      09-20-2004
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


 
Reply With Quote
 
 
 
 
McKirahan
Guest
Posts: n/a
 
      09-20-2004
"J Belly" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


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[i].type == "checkbox") {
if (form.elements[i].name != what) {
form.elements[i].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>


 
Reply With Quote
 
 
 
 
J Belly
Guest
Posts: n/a
 
      09-20-2004
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[i].type == "checkbox") {
if (form.elements[i].name != 0) {
form.elements[i].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


On Mon, 20 Sep 2004 10:48:11 GMT, "McKirahan" <(E-Mail Removed)>
wrote:

>"J Belly" <(E-Mail Removed)> wrote in message
>news:(E-Mail Removed).. .
>> 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

>
>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[i].type == "checkbox") {
> if (form.elements[i].name != what) {
> form.elements[i].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>
>


 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      09-20-2004
"J Belly" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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[i].type == "checkbox") {
> if (form.elements[i].name != 0) {
> form.elements[i].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


[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[i].type == "checkbox") {
if (form.elements[i].value != "0") {
if (form.elements[i].name != what) {
form.elements[i].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>


 
Reply With Quote
 
J Belly
Guest
Posts: n/a
 
      09-20-2004
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



On Mon, 20 Sep 2004 20:05:31 GMT, "McKirahan" <(E-Mail Removed)>
wrote:

>[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[i].type == "checkbox") {
> if (form.elements[i].value != "0") {
> if (form.elements[i].name != what) {
> form.elements[i].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>
>


 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      09-21-2004
"J Belly" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


[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[i].type == "checkbox") {
if (what == 0) {
if (form.elements[i].value != "0") {
if (form.elements[i].name != what) {
form.elements[i].checked = false;
}
}
} else {
if (form.elements[i].value == "0") {
form.elements[i].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>


 
Reply With Quote
 
J Belly
Guest
Posts: n/a
 
      09-21-2004
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


On Tue, 21 Sep 2004 01:58:55 GMT, "McKirahan" <(E-Mail Removed)>
wrote:

>"J Belly" <(E-Mail Removed)> wrote in message
>news:(E-Mail Removed).. .
>> 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

>
>[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[i].type == "checkbox") {
> if (what == 0) {
> if (form.elements[i].value != "0") {
> if (form.elements[i].name != what) {
> form.elements[i].checked = false;
> }
> }
> } else {
> if (form.elements[i].value == "0") {
> form.elements[i].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>
>


 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      09-21-2004
On Mon, 20 Sep 2004 22:24:16 -0700, J Belly <(E-Mail Removed)> wrote:

[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)?


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.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      09-21-2004
"J Belly" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...
> 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


[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[i].type == "checkbox") {
if (form.elements[i].name == ques) {
if (what == 0) {
if (form.elements[i].value != "0") {
if (form.elements[i].name != what) {
form.elements[i].checked = false;
}
}
} else {
if (form.elements[i].value == "0") {
form.elements[i].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>


 
Reply With Quote
 
Oscar Monteiro
Guest
Posts: n/a
 
      09-21-2004
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 .
"J Belly" <(E-Mail Removed)> escreveu na mensagem
news:(E-Mail Removed)...
> 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
>
>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Selecting Default Gateway Cosmic Cruizer Perl Misc 2 04-21-2008 12:21 AM
selecting a default option in a drop down list vimal Javascript 3 10-04-2007 01:34 PM
radio button/check box selecting default problem DOM2 sudhaoncyberworld@gmail.com Javascript 3 11-28-2005 03:08 PM
Default Mozilla isn't default! Help! M. FERRANTE Firefox 1 07-27-2005 09:07 AM
Selecting contents of TEXTAREA by default Red_Indian HTML 5 05-25-2004 07:51 AM



Advertisments