Question

I’m trying to create a toggle function in Javascript for an HTML checkbox where if the checkbox is checked/unchecked, the javascript detects that with an if statement and executes an action accordingly (in this case, adding/removing a parameter to url and refreshing the page with a new set of results)

Right now, I’m just trying to test the functionality of the javascript toggle by having alerts pop up when the box is checked/unchecked.

Here’s the javascript:

<script type="text/javascript" language="javascript">
function filterToggle(attribName)
{
  var elementII = document.getElementById(attribName);
  if(elementII.checkedTag == "unchecked"){
     elementII.checkedTag = "checked";
     alert("checked");
  }
  else {
    elementII.checkedTag = "unchecked";
    alert("unchecked");
  }
}
</script>

And here’s where the checkboxes are being created multiple times, inside a php foreach loop:

$BODY .= sprintf("<input type=\"checkbox\" onclick=\"filterToggle('%s')\" name=\"%s\" value=\"%s\" id=\"%s\" checkedTag=\"unchecked\"/> %s ",
                 $attribName, $attribName, $attribClass, $attribName, $attribName, $attribName);

So the idea here is the boxes should load on the page unchecked (which they are), and when I check them, an alert should say “checked”, and when I uncheck, and alert should say “unchecked”. Everything here works perfectly, except the fact that when I check the boxes now, they say “unchecked”, and when I uncheck, they say “checked”. So it seems the javascript is changing the value of the checkedTag attribute in the checkboxes and responding accordingly, but it’s not recognizing the fact that the value of the checkbox is initially set to “unchecked”, so that instead of setting it to unchecked and alerting “unchecked” when first clicked, as it’s currently seemingly doing, it should set it to “checked” and alert “checked”.

Any thoughts here? I can’t figure out why it’s not recognizing that initial value – tried double quotations around the checkedTag value, single quotations, no quotations…same result.

Here’s some example output code in JSFiddle – http://jsfiddle.net/intenex/s45JC/3/, with 3 checkboxes displaying the error described above.

Thanks!

Answer 1

Simply don’t add any checked attribute to the elements which should not be checked.

You are making it much more complicated than it is. Instead of adding a custom attribute, test the checked property of the DOM element:

Example:

HTML

<input type="checkbox" onchange="filterToggle(this)" name="Below $110" value="Price Range" id="Below$110"  />

JavaScript

function filterToggle(element) {
  if(element.checked){
     alert("checked");
  }
  else {
     alert("unchecked");
  }
}

DEMO

Note: Element ids cannot contain spaces.