Использование Jquery для извлечения данных из флажков

Question

Я довольно новичок в Jquery и javascript, прыгнул в голову первым и немного застрял.

У меня есть страница, на которой нажатие кнопки открывает небольшое наложение с помощью вызова AJAX, которое затем дает пользователям целую кучу флажков, чтобы выбрать, какие теги они хотят связать с ключевыми словами. Затем я пытаюсь обработать флажки через другой вызов ajax для обработки. Пока все выглядит хорошо, за исключением того, что я не могу получить данные, из которых отмечены флажки, а какие нет через форму.

Я использую комбо jquery, PHP и MySQL; см. фрагмент ниже.

<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>

В данный момент я получаю массив из этого, который соответствует исходным параметрам (поэтому, если пункты 1, 3 и 5 были проверены, они отображаются правильно), однако, если я изменю переменные перед отправкой, (изменяя это так Пункты 1, 2 и 5 были проверены), он по-прежнему показывает выходные данные как проверенные исходные элементы (1, 3 и 5). Что мне здесь не хватает?

К сожалению, у меня нет доступа к живому примеру, который я могу вам дать.

Заранее спасибо!

Answer 1

Пара вариантов:

Если вам нужны выбранные флажки в JS (при условии, что флажки имеют общий класс):

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

Если вы хотите получить список выбранных флажков в объекте $ _POST в PHP, вы сначала измените свою разметку, чтобы иметь общий массив имен для каждого флажка:

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

Тогда .. в PHP

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

Answer 2

Если вам нужны проверенные товары:

  $("#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

   });
  });

или если вы хотите перебрать все элементы флажка:

  $("#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

   });
  });

Надеюсь, это поможет.

Answer 3

Jquery как функциональность, которая может выбирать отмеченные элементы (работает для радио и флажки). Посмотрите на проверенный селектор.

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