Question

我对Jquery和javascript相当新，并且首先跳了起来并且有点卡住了。

我有一个页面，单击按钮可以通过AJAX调用打开一个小的叠加层，然后提供一大堆复选框，供用户选择要与关键字关联的标签。然后我尝试通过另一个ajax调用来处理复选框。到目前为止，一切看起来还不错，除了我无法获取勾选复选框的数据以及不通过表单的数据。

我正在使用jquery，PHP＆amp; 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＆amp; 5）被检查。我在这里缺少什么？

我不幸地可以访问我可以给你的实例。

提前致谢！

Answer 1

Jquery作为可以选择已检查元素的功能（适用于无线电和复选框）。看一下选中的选择器。

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

Answer 2

有两种选择：

如果您需要JS中选中的复选框（假设复选框共享一个公共类）：

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

如果您想要PHP中$ _POST对象中所选复选框的列表，您首先要将标记更改为每个复选框都有一个公用名称数组：

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

然后..在PHP中

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

Answer 3

如果您只需要检查项目：

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

   });
  });

希望这会有所帮助。

使用Jquery从复选框中提取数据

3 个答案: