Jquery: Handling Checkbox Click Event with JQuery

Question

I can't figure out what is going on here. I have some nested lists of checkboxes that I would like to check when the parent is checked. More importantly, I can't even get the alert to show up. It's as if the click event is not firing. Any ideas?

<script type="text/javascript"> 
$(document).ready(function() {
$("#part_mapper_list input[type=checkbox]").click(function(){
    alert("clicked");
    if ($(this).attr("checked") == "checked"){
        $(this + " input").attr("checked") = "checked";
    } else {
        $(this + " input").attr("checked") = "";
    }
});
}
</script>
<link rel="stylesheet" href="style.css">
<div>
<ul id="part_mapper_list">
<?php
$makes = array("Audi", "BMW", "Mini", "Porsche", "Volkswagen");
$generations = array("Generation 1", "Generation 2", "Generation 3", "Generation 4", "Generation 5");
$modelclusters = array("Model Cluster 1", "Model Cluster 2", "Model Cluster 3", "Model Cluster 4", "Model Cluster 5");
$cars = array("Car 1", "Car 2", "Car 3", "Car 4", "Car 5");

    foreach($makes as $mappermake){
        echo "<li id=\"" . $mappermake . "\" class=\"mapper_make\">+<input type=\"checkbox\" name=\"mapper_make\" value=\"" . $mappermake . "\">" . $mappermake . "</input><ul>";
        foreach($generations as $mappergen){
            echo "<li id=\"" . $mappergen . "\" class=\"mapper_gen\">+<input type=\"checkbox\" name=\"mapper_gen\" value=\"" . $mappergen . "\">" . $mappergen . "</input><ul>";
            foreach($modelclusters as $mappermodelcluster){
                echo "<li id=\"" . $mappermodelcluster . "\" class=\"mapper_modelcluster\">+<input type=\"checkbox\" name=\"mapper_modelcluster\" value=\"" . $mappermodelcluster . "\">" . $mappermodelcluster . "</input><ul>";
                foreach($cars as $mappercar){
                    echo "<li id=\"" . $mappercar . "\" class=\"mapper_car\"><input type=\"checkbox\" name=\"mapper_car\" value=\"" . $mappercar . "\">" . $mappercar . "</input></li>";
                }
                echo "</ul></li>";
            }
            echo "</ul></li>";
        }
        echo "</ul></li>";
    }
?>
<input id="submit_mapping" type="submit">
</div>

Answer 1

You're missing a closing bracket ) at the end of your code sample. Is that a copy and paste error or is that the case in your code?

$(document).ready(function() {
  $("#part_mapper_list input[type=checkbox]").click(function(){
    alert("clicked");
    if ($(this).attr("checked") == "checked"){
      $(this + " input").attr("checked") = "checked";
    } else {
      $(this + " input").attr("checked") = "";
    }
  });
});

Edit for below comment: I'm not entirely sure if I understand what you're trying to do, but try this untested code.

$(document).ready(function() {
  $("#part_mapper_list input[type=checkbox]").click(function() {
    $("#" + $(this).val() + " input[type=checkbox]").attr("checked", $(this).attr("checked"));
  });
});

Answer 2

If the alert isn't firing there might problem with our HTML markup, please verify it is well-formed and that you properly nested tags.

I would be much helpful if you can as well post your HTML code, for us to inspect the problem.

$(document).ready(function() {
  $("#part_mapper_list :checkbox").click(function(){
    alert("clicked");
    if (this.checked){
        //$(this + " input").attr("checked") = "checked";
    } else {
        //$(this + " input").attr("checked") = "";
    }
  });
});

if the markup are correct and valid, directly access the checked propery of the rawdom object instead of wrapping it with jquery to minimize overhead.

Answer 3

Try This:

$(document).ready(function() {
  $("#part_mapper_list :checkbox").click(function(){
     $(this).find(":checkbox").attr("checked", this.checked);
  });
)};