Checking and Unchecking Checkboxes 3

[Genimuse]

I have a simple form, named CalForm, with 8 checkboxes on it, named Day0 through Day7.

If any of the checkboxes change, I want to call a function that checks for a few states and makes changes based on those states:

1. If Day0 is now checked, Days 1-7 should become unchecked.

2. If one or more of Days 1-7 are checked, Day0 should become unchecked.

3. If no checkboxes are checked, Day0 should become checked.

Even though I spend time on it, I still totally suck at figuring out how to address stuff. Here's what I have now, but I know I'm not referring to the objects correctly:

function ManageDayBoxes() {
  if(document.forms[CalForm].elements[Day0].checked){
    document.forms[CalForm].elements[Day1].checked = false;
    document.forms[CalForm].elements[Day2].checked = false;
    document.forms[CalForm].elements[Day3].checked = false;
    document.forms[CalForm].elements[Day4].checked = false;
    document.forms[CalForm].elements[Day5].checked = false;
    document.forms[CalForm].elements[Day6].checked = false;
    document.forms[CalForm].elements[Day7].checked = false;
  } else {
    if document.forms[CalForm].elements[Day1].checked = false && document.forms[CalForm].elements[Day2].checked = false && document.forms[CalForm].elements[Day3].checked = false && document.forms[CalForm].elements[Day4].checked = false && document.forms[CalForm].elements[Day5].checked = false && document.forms[CalForm].elements[Day6].checked = false && document.forms[CalForm].elements[Day7].checked = false {
      document.forms[CalForm].elements[Day0].checked = true;
    } else {
      document.forms[CalForm].elements[Day0].checked = false;
    }
  }
}

which is called in the checkboxes as

onchange='ManageDayBoxes()'

So... what have I totally screwed up?

Thanks in advance.

 

[trollacious]

Try this:

function ManageDayBoxes(onecheck)
{
var calform = document.forms['CalForm'].elements;
if (onecheck.name == 'Day0')
  {
  if (onecheck.checked)
    {
    for (var di = 1;di <= 7;di++)
      {
      calform['Day' + di].checked = false;
      }
    }
  }
else
  {
  var daychecked = false;
  for (var di = 1;di <= 7;di++)
    {
    if (calform['Day' + di].checked)
      {
      daychecked = true;
      }
    }
  calform['Day0'].checked = !daychecked;
  }
}

and use

onchange="ManageDayBoxes(this)"

Lee

 

[cLFlaVA]

are you getting an error?

make sure you put quotes around your object names:

[tt]document.forms[[red]'[/red]calForm[red]'[/red]].elements[[red]'[/red]Day0[red]'[/red]][/tt]

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Genimuse]

Thanks, cLFlaVA, I totally missed that. Turns out that it was full of other errors, too, including assignment (=) instead of comparison (==) and missing parens around an if. Too long since I really wrote much Javascript.

Then, of course, was the realization that the logic sucked.

The logic in your code, trollacious, makes a jillion times more sense, but it doesn't seem to function the way I'd expect in IE (works perfectly in FireFox). The form starts with Day0 checked. Each of these scenarios is from a refreshed form:

A. If I click Day1, it will check, but Day0 stays checked. If I now click Day2, it will check and Day0 will finally uncheck. This is always true... the first check of non-Day0 does nothing, the second one does.

B. If I check a couple of days, resulting in Day0 becoming unchecked, then uncheck those days, Day0 stays unchecked (nothing is checked). If I then try to check Day0, it unchecks it. If I try again, it checks it fine.

C. If I uncheck Day0, it stays unchecked and nothing is checked.

So... I don't get it. The code looks right to me. Why the effective "delay" in version A? Why doesn't B work? And why not C?

 

[cLFlaVA]

instead of onchange, try calling it from the onclick event. the onchange usually doesn't fire until the element has lost focus.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Genimuse]

Bingo!

If only I could hand out a second star.

 

[Genimuse]

Ok, so I'm all clever and stuff, and I have a page where I decide to use a slightly modified version of that code to do something different. But my cleverness has backfired.

In this case, the logic would work like this:

A. If the user checks checkbox mot0 (by default mot1-30 are false), nothing happens (it does not check).

B. If the user checks mot0 while it's true, mot1 through mot30 become unchecked.

C. If the user checks mot1 - mot30, mot0 also becomes checked.

D. If the user unchecks all of mot1-mot30, mot0 also becomes unchecked.

So my code is basically troll's above, with the logic sort-of reversed(true becomes false, "not" becomes... not "not":

function ManageMotBoxes(onecheck) {
  var reportform = document.forms['report'].elements;
  if (onecheck.name == 'mot0') {
    if (onecheck.checked == false) {
      for (var mi = 1;mi <= 30;mi++) {
        reportform['mot' + mi].checked = false;
      }
    }
  } else {
    var motchecked = false;
    for (var mi = 1;mi <= 30;mi++) {
      if (reportform['mot' + mi].checked) {
        motchecked = true;
      }
    }
    reportform['mot0'].checked = motchecked;
  }
}

A, C, and D are all working, but B does not. In fact, it does not matter if on the 4th line I put "== true" or "== false", it behaves the same.

Frankly, I'm feeling like an idiot about it, so I must be one. What am I missing, logically?

 

[cLFlaVA]

dude, B. worked for me:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>
<script type="text/javascript"><!--

function ManageMotBoxes(onecheck) {
  var reportform = document.forms['report'].elements;
  if (onecheck.name == 'mot0') {
    if (onecheck.checked == false) {
      for (var mi = 1;mi <= 30;mi++) {
        reportform['mot' + mi].checked = false;
      }
    }
  } else {
    var motchecked = false;
    for (var mi = 1;mi <= 30;mi++) {
      if (reportform['mot' + mi].checked) {
        motchecked = true;
      }
    }
    reportform['mot0'].checked = motchecked;
  }
}

//--></script>
<body>

<form name="report">
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot0" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot1" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot2" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot3" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot4" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot5" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot6" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot7" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot8" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot9" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot10" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot11" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot12" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot13" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot14" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot15" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot16" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot17" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot18" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot19" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot20" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot21" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot22" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot23" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot24" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot25" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot26" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot27" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot28" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot29" />
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot30" />
</form>

</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

note: since you are using onclick, you want to make sure you include miceless users (those bastards). call the function on the onkeypress (or maybe it's onkeyup - i can never remember) event as well.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Genimuse]

Huh. Yeah, that works for me, too. I copied the code right out of my page... weird. I'll have to take a look at it tomorrow.

BTW, with that code, A doesn't work, but it can easily be made to by adding

    } else {
      onecheck.checked = false;

after the 7th line of the function.

Well, I guess my idiocy has nothing to do with the logic of the code.

Thanks again.

 

[tsuji]

With the various notes on work and not work, I think this might be closer to your need.
[tt]
function ManageMotBoxes(onecheck) {
var reportform = document.forms['report'].elements;
if (onecheck.name == 'mot0') {
if (onecheck.checked == false) {
for (var mi = 1;mi <= 30;mi++) {
reportform['mot' + mi].checked = false;
[blue]onecheck.disabled=true;[/blue]
}
}
} else {
var motchecked = false;
for (var mi = 1;mi <= 30;mi++) {
if (reportform['mot' + mi].checked) {
motchecked = true;
[blue]reportform['mot0'].disabled=false;
break; //added for added-performance only[/blue]
}
}
reportform['mot0'].checked = motchecked;
}
}
[/tt]
with the mot0 input initial.
[tt]
<input type="checkbox" onclick="ManageMotBoxes(this);" name="mot0" [blue]disabled="disabled"[/blue] />[/tt]

 

[Genimuse]

Great addition, tsuji, clarifying the process for the user.

Also, I discovered that my problem with the code not working was that mot0's name isn't mot0 (the name is actually an identifier for the record in the database), it's the id that's mot0. Therefore changing onecheck.name to onecheck.id solved the problem.

Though I do wonder how Javascript figures it out, and how inefficient it is. When you refer to reportform['mot' + mi], does it run through all the names in the form to try to find a match, then through the IDs? The other way around?