Using Jquery to pull data from checkboxes

Question

I am fairly new to Jquery and javascript and have jumped in head first and am a bit stuck.

I have a page where clicking a button opens a small overlay via an AJAX call that then gives a whole bunch of checkboxes for users to choose what tags they want to associate with the keywords. I'm then trying to process the checkboxes via another ajax call to process. So far everything looks okay, except I can't get the data from which checkboxes are ticked and which aren't through the form.

I'm using jquery, PHP & MySQL combo; see the below snippet.

<form method="post" >
<h1>Categories</h1> 
<fieldset id="edit_box">
        <legend>Choose Tags</legend>

<?php
// $tags is an array with all the original values from the database, so a list of available tags and if they are set for each category
foreach($tags as $value){
        if(isset($value['set']) && $value['set'] ==1) $set = "checked = 'checked'"; else $set = "";
        echo'<p class="floatlist">
        <input type="checkbox" name="'.$value['id'].'" id="'.$value['id'].'" '.$set.' />
        <label for="'.$value['id'].'" class="inline">'.$value['name'].'</label>
</p>';
}
        ?>
<p><button type="button" id="update_tags">Save Changes</button></p>
</fieldset>     
</form> 

<script type="text/javascript">
        $("#update_tags").click(function(){
                var data = new Array();
                $('#edit_box input').each(function() {
                        var tagid = $(this).attr('id');
                        if($('#'+tagid ).attr('checked')){data[tagid] = '1';} else {data[tagid] = 0;}
                });

                $.post("inc/process_tags.php", { page: "update_tags", categories: data }, function(data){
                        var output = data;
                        $('#edit_box').html(output);

                });                             
        });

</script>

At the moment, I get an array out of this that corresponds with the original options (so if item 1 3 & 5 were checked, they show correctly) however if I change the variables before I submit it, (changing it so item 1 2 & 5 were checked) it still shows the output as the original items (1 3 & 5) being checked. What am I missing here?

I don't unfortunately have access to a live example I can give you.

Thanks in advance!

Answer 1

Jquery as functionality that can select checked elements (works for radio and check boxes). Take a look at the checked selector.

http://api.jquery.com/checked-selector/

Answer 2

A couple of options:

If you need the selected checkboxes in JS (assuming the checkboxes share a common class):

$(".checkbox_class:checked").each(function(){
   // All of the checked boxes are iterated, $(this).val();
});

If you want a list of the selected checkboxes in a $_POST object in PHP, you would first change your markup to have a common name array for each checkbox:

<input type="checkbox" name="tags[]" value="php the value" />

Then.. in PHP

print_r($_POST['tags']); // outputs array of all checked tags

Answer 3

If you just need checked items:

  $("#update_tags").bind("click", function(){
    var data = [];

    // :visible is optional
    $('#edit_box').find("input[type='checkbox']:checked:visible").each(function(){
      var $t = $(this),           // current checkbox
          id = $t.attr('id');     // checkbox id

      data[id] = '1';

      // insert additional code here

   });
  });

or if you want to iterate through all checkbox elements:

  $("#update_tags").bind("click", function(){
    var data = [];

    // :visible is optional
    $('#edit_box').find("input[type='checkbox']:visible").each(function(){
      var $t = $(this),           // current checkbox
          id = $t.attr('id');     // checkbox id

      data[id] = $t.is(":checked") ? '1' : '0';

     // insert additional code here

   });
  });

Hopefully this helps.