Keep checkbox status for multiple checkboxes with same name

Question

I have a page of content generated by ajax and organized with a row of checkboxes. Clicking on any of the checkboxes passes a parameter into the URL and that's used to create a SQL query. I want to add the checkboxes to another section of the page but when I do this, I'm unable to keep the checkboxes styled (there's a custom style for a checked and unchecked state). Click on either row of checkboxes will organize the data properly, but only one row of checkboxes will show the checked-on/checked-off state.

I'm using the following code to style the checkboxes:

$(':checkbox').change(function() {
    if($(this).is(":checked")) {
        $(this).next('label').children('div').removeClass("sort-not-active").addClass("sort-active");
    }
    else {
        $(this).next('label').children('div').removeClass("sort-active").addClass("sort-not-active");
    }
});

The HTML for my checkboxes is below. I figured my style issues might be caused because I'm passing the variable as an ID instead of a class, but whenever I remove the ID the checkboxes stop working altogether.

<?php foreach (array_unique($disciplines) as $discipline): ?>
    <input class="disciplinechecks" type="checkbox" id="<?php echo $discipline; ?>" name="<?php echo $discipline; ?>" value="<?php echo $discipline; ?>" onChange="checkBoxChange(this.checked,'<?php echo $discipline; ?>');">
    <label for="<?php echo $discipline; ?>">
        <div class="sort-genre sort-active"><?php echo $discipline; ?></div>
        <span></span>
    </label>
<?php endforeach ?>

Below is the function I use to pass the values into the URL. Nothing here references an ID so I can't figure out why removing the ID from my checkboxes breaks it:

var typeItemsChecked = Array( ALL OF THE $DISCIPLINE VALUES ARE HERE );

function checkBoxChange(x,y) {
    if(x){
        var type = y;
        typeItemsChecked.push(type);
        showUser();
    }
    else {
        var type = y;
        typeItemsChecked.remove(type);
        showUser();
    }
}

function getURLString() {
    joinedTypeItemsChecked = typeItemsChecked.join();
    var queryString = [
        ("d="+joinedTypeItemsChecked)
    ];

    var url = queryString.join("&");
    return url;
}

This is what the HTML looks like after the PHP

<input class="disciplinechecks" type="checkbox" id="Web Design" name="Web Design" value="Web Design" onChange="checkBoxChange(this.checked,'Web Design');">
<label for="Web Design">
    <div class="sort-genre sort-active">Web Design</div>
    <span></span>
</label>

<input class="disciplinechecks" type="checkbox" id="Print Design" name="Print Design" value="Print Design" onChange="checkBoxChange(this.checked,'Print Design');">
<label for="Print Design">
    <div class="sort-genre sort-active">Print Design</div>
    <span></span>
</label>

Answer 1

Okay, so, after reading your comment responses, nothing in your original post jumps out at me immediately as an issue, but there are a couple of problems that your "processed" code has (particularly around the id and name attributes) that could be causing you troubles. Specifically:

1. id attributes can not contain spaces (see here for more information on valid id values: What are valid values for the id attribute in HTML?)

2. id values must be unique within the page

3. Multiple checkboxes (and, on a side note, radio buttons) that have the same name attribute, are considered to be grouped (i.e., sort of like they are one input).

Now, browsers can often be pretty forgiving about these things, but scripting languages can get very confused. So, before you go any further in your debugging, I would suggest updating your PHP to:

• strip any spaces out of the $discipline value, when assigning the id attribute. While name attributes can have spaces, I would avoid using them there as well, as a general practice.
• use some sort of index value (or something similar) to differentiate the id and name values between the two sets of checkboxes.

---

On a side note . . .

. . . there are also a couple of places where you can simplify your code . . . doing that will also reduce the number of places where bugs can pop up. Specifically:

In you JS code for the styling, try this:

$(':checkbox').change(function() {
    $(this).next().children('div').toggleClass("sort-not-active sort-active");
});

• no need to specify 'label' in the next() call, since it is always the next sibling of the checkbox
• if the default classes are set up correctly, then all you need to do is toggle the two classes on the change of the checkbox. Since there are only two states that the checkbox can be in, there are only two states that the combination of classes can be in.

For the code for capturing the checked boxes, you can simplify it to this:

function checkBoxChange(x,y) {
    if (x) {
        typeItemsChecked.push(y);
    }
    else {
        typeItemsChecked.remove(y);
    }
    showUser();
}

I don't see any reason that this would be causing the problems that you are seeing, but I just thought that I would toss that out to help reduce the complexity a little bit. :)

---

So, I'm not guaranteeing that any of these are going to fix the issue that you are seeing (actually, using just your original JS for the styles and the HTML samples that you gave, everything worked just fine for me in Firefox), but I do know that some browsers and scripting languages can be very particular about not following the correct rules of HTML. Try addressing some of these issues and see if the problems that you are seeing go away. If not, we can try again with your new code.