Checkboxes!

meghatronic

meghatronic

meghatronic

Soldato
Joined
24 Nov 2002
Posts
16,378
Location
38.744281°N 104.846806°W
I am actually going to beat myself over this one but can't figure it out.

I have a series of checkboxes and want one that has "all" on it. As you've guessed it, ticking this one ticks them all, unticking it unticks them all. I can do the ticking bit but for some reason can't get it to uncheck them all.

Also just found out the method i'm using only works in IE, not Mozilla, Opera or Safarai.

Any ideas?
 
Last edited:
Ok I only ever program in Java and haven't done any formal Javascript but the following piece of code I wrote seems to work in both IE and Firefox.

Code: 
<html>
  <head>
    <script language="JavaScript">
      function check(field)
      {
        var checkboxGroup = document.form1.group1;
        for (i=0; i<checkboxGroup.length; i++)
        {
          if (field.checked)
          {
            checkboxGroup[i].checked = true;
          }
          else
          {
            checkboxGroup[i].checked = false;
          }
        }
      }
    </script>
  </head>
  <body>
    <form name="form1">
      <input type="checkbox" name="group1" value="1">1<br>
      <input type="checkbox" name="group1" value="2">2<br>
      <input type="checkbox" name="group1" value="3">3<br>
      <input type="checkbox" name="group1CheckAll" onclick="check(this);">all
    </form>
  </body>
</html>
 
You see, I didn't think to do it in a seperate function... tried to do it as "on enable = check" on disable uncheck etc..... but only worked in IE.

Cheers!
 
Another question...

I have to checkboxes now on a different page, the user should be able to select neither or either (NOT both). I can't seem to get my head round this. Have tried on click turn the other one off but it doesn't seem to work.

Any ideas?
 
How about a function which unchecks both boxes if one has been ticked. Then rechecks the one which was ticked. This would guarantee that only one is ever selected.

Code: 
<html>
  <head>
    <script language="JavaScript">
      function check(field)
      {
        if (field.checked)
        {
          document.form1.group1[0].checked = false;
          document.form1.group1[1].checked = false;

          field.checked = true;
        }
      }
    </script>
  </head>
  <body>
    <form name="form1">
      <input type="checkbox" name="group1" value="apples" onclick="check(this);">apples<br>
      <input type="checkbox" name="group1" value="oranges" onclick="check(this);">oranges<br>
    </form>
  </body>
</html>
 
molar said:
How about a function which unchecks both boxes if one has been ticked. Then rechecks the one which was ticked. This would guarantee that only one is ever selected.

Code: 
<html>
  <head>
    <script language="JavaScript">
      function check(field)
      {
        if (field.checked)
        {
          document.form1.group1[0].checked = false;
          document.form1.group1[1].checked = false;

          field.checked = true;
        }
      }
    </script>
  </head>
  <body>
    <form name="form1">
      <input type="checkbox" name="group1" value="apples" onclick="check(this);">apples<br>
      <input type="checkbox" name="group1" value="oranges" onclick="check(this);">oranges<br>
    </form>
  </body>
</html>
Click to expand...

Bingo! Cheers!

Why is it always the simple things I mess up...
 
Last edited:
jdickerson said:
Another question...

I have to checkboxes now on a different page, the user should be able to select neither or either (NOT both). I can't seem to get my head round this. Have tried on click turn the other one off but it doesn't seem to work.

Any ideas?
Click to expand...

Just use radio buttons instead of checkboxes as this is the default behaviour...
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_radio
 
molar... got another quick query... please don't beat me!

I have the following,

radiobutton1 - textarea
radiobutton2 - upload box

radiobuttona radiobuttonb radiobuttonc radiobuttond

However, if 1 is selected, d should be compeltely unselecteable/disabled....if 2 is selected, a-d is fine.

Secondly, if textarea is used, I want 1 autoselected, whereas if upload box is used i want 2 autoselected.

I can't get my head round it as this is radiobuttons, not check boxes... I'm so stupid lately.

I think I owe you a pint!
 
Last edited:
jdickerson said:
molar... got another quick query... please don't beat me!

I have the following,

radiobutton1 - textarea
radiobutton2 - upload box

radiobuttona radiobuttonb radiobuttonc radiobuttond

However, if 1 is selected, d should be compeltely unselecteable/disabled....if 2 is selected, a-d is fine.

Secondly, if textarea is used, I want 1 autoselected, whereas if upload box is used i want 2 autoselected.

I can't get my head round it as this is radiobuttons, not check boxes... I'm so stupid lately.

I think I owe you a pint!
Click to expand...

I think you can do .disabled and .checked on the radio button elements like so:

Code: 
<html>
  <head>
    <script language="JavaScript">
      function selectType(field)
      {
        if (field.value == 'textbox')
        {
          document.form1.group1[3].disabled = true;
          document.form1.group1[0].checked = true;
        }
        else
        {
          if (field.value == 'upload')
          {
            document.form1.group1[3].disabled = false;
            document.form1.group1[1].checked = true;
          }
        }
      }
    </script>
  </head>
  <body>
    <form name="form1">
      <input type="radio" name="type" value="textbox" onClick="selectType(this);">textbox
      <input type="radio" name="type" value="upload"  onClick="selectType(this);">upload
      <br>
      <input type="radio" name="group1" value="a">a
      <input type="radio" name="group1" value="b">b
      <input type="radio" name="group1" value="c">c
      <input type="radio" name="group1" value="d">d
    </form>
  </body>
</html>

Only tested in Firefox by the way!
 
I think I should hire you to do my bidding ;)

Task the first: take over the world (by proxy for me).

When you've done that report back... I'll reward you with something... China maybe?
 
You must log in or register to reply here.
Back
Top Bottom