如何使用jquery从foreach循环中获取每个选定的复选框值

Question

我已从数组中接收到值，然后创建了一个 foreach 以从中获取每个值。 将每个值添加到复选框后，然后创建一个 onclick 函数将值传递给 jquery 函数。 我一一收到每个值我需要通过单击复选框收集所有从用户中选择的值。 这是我的代码

$val = array();
$val =    array("Peter"=>35, "Ben"=>37, "Joe"=>43);
foreach ($val as $value){
  <input type="checkbox" id="vehicle1" name="vehicle1" value="<?php print_r($value['id']); ?>" 
  onclick="assignId(<?php echo (isset($value['id'])?$value['id']:'0') ?>)">
} 

这是我的 jquery 函数，我需要收集所有复选框选中的记录并传递给控制器​​

function assignId(val) {
        alert(val);
        $.ajax({
            url: '/path/to/file',
            type: 'POST',
            dataType: 'json',
            data: {param1: 'value1'},
            success : function(response){
                alert(response);
            }
        });
        
    }

如您所见，我只需要获取位于 foreach 下的复选框的所有选定值并将其传递给控制器​​。

Answer 1

您正在循环的数组是一个关联数组，这意味着它有键-值 对。当您遍历这样的数组时，您可以解构 foreach 语句中的键和值。这样就可以动态设置每个复选框的id、name和value。

使您的 ID 和名称独一无二实际上非常重要。 Takes 可以将元素彼此区分开来，并且可以将每个输入与一个值配对。虽然名称可以相同，但现在让它们独一无二。

将<input> 元素包装在<form> 标记中。这个表单标签将使您更容易使用 jQuery 并在需要时从每个输入中获取所有值。还要添加<button> 来提交表单。

<?php
$data = array(
  "Peter" => 35, 
  "Ben"   => 37, 
  "Joe"   => 43
);
?>

<form id="vehicleForm">
  <?php foreach ($data as $key => $value) { ?>
    <input type="checkbox" name="vehicle-<?php echo $key); ?>" value="<?php echo $value); ?>"/>
  <?php } ?>
  <button type="submit">Submit</button>
</form>

修改您的 assignId 函数以接受单个字符串，该字符串可用于 AJAX 调用中的 data 属性。此字符串将在本示例之后由 jQuery 生成。

function assignIds(data) {
  $.ajax({
    url: '/path/to/file',
    type: 'POST',
    dataType: 'json',
    data: data,
    success: function(response){
      alert(response);
    }
  });
}

收听表单上的submit 事件。每次单击提交按钮时都会触发此事件。表单具有默认行为。您需要阻止这种默认行为，以便创建自己的行为。

使用.serialize() 方法，您可以从表单中提取值。此方法的结果是准备发送到服务器的查询字符串。将其传递给assignIds 函数，您的数据就会发送出去。

$('#vehicleForm').on('submit', function(event) {
  event.preventDefault();
  var $this = $(this);
  var data = $this.serialize();
  assignIds(data)
});

Answer 2

@Emiel 已经很好地解释和修复了代码的所有主要问题，但总是有不同的方法来解决每个问题。以下是我遵循的步骤，我决定只使用一个功能。此外，可能还有一些对未来读者有用的东西。这就是我写这个答案的原因。

1. 我创建了一个按钮来提交表单，因为您不能在每次有人点击它时触发的每个复选框上使用onclick() 函数。所以用onclick=assignID()创建一个按钮。

2. 我修复了您使用的方法不正确，@Emiel 在第一个答案中已经提到过，所以最好不要重复。

3. 我保持复选框的名称相同，以便以后可以使用getElementsByName(vehicle1) 函数访问它们。

4. 在assignID()我创建了一个数组来保存复选框的值

5. 然后使用JSON.stringify() 将数组格式化为 JSON 数据。

    <?php
        $val =array("Peter"=>35, "Ben"=>37, "Joe"=>43);
        foreach ($val as $key=>$value){//assouciative array have key and value relation
    ?>
        <input type="checkbox" id="vehicle1" name="vehicle1" value="<?php echo $value; ?>"><!--//you don't have to put onclick functio in here-->
    <?php
        } 
    ?>
    <button onclick="assignId()">Button</button><!--Its necassary to have a button to submit value-->
    <script type="text/javascript">
        function assignId() {
            var datas = [];//crating array
            var checkboxes=document.getElementsByName("vehicle1");//getting all checkboxes by name
            for(var i=0, n=checkboxes.length;i<n;i++) {//looping through each checkboxes to see if they are checked
                if(checkboxes[i].checked==true){//check if checkbox is checked
                    datas.push(checkboxes[i].value);//push the value of the checked checkbox into datas array
                }
            }
            $.ajax({
                url: 'path/to/php/file',
                type: 'POST',
                datatype:"json",
                data: {
                    param1: JSON.stringify(datas)//send the array in JSON data form
                },
                success : function(response){
                    alert(response);
                }
            });
        }
    </script>
   

Answer 3

您的代码有什么不好的地方是，每次您单击复选框时，它都会向您的服务器发送一个请求。所以我为你的问题提供了一个简单的解决方案。

在你的 PHP 代码中写下：

<form id="myForm">
    <?php
        $value =    array("Peter"=>35, "Ben"=>37, "Joe"=>43);
            var_dump($value);
            foreach ($value as $val => $data){
              echo '<input type="checkbox" id="vehicle1" name="vehicle1" value="'.$data.'" /><label>'.$val.'</label>'; 
            } 
    ?>

    <input type="submit" name="" value="submit">
</form>

然后为您的脚本：

     $('form').on('submit', function( event ) {

       console.log($(this).serialize());

       event.preventDefault();

        $.ajax({
           url: '/path/to/file',
           type: 'POST',
           dataType: 'json',
           data: {param1: $(this).serialize()},
           success : function(response){
            alert(response);
           }
        });
    });

我希望这会对你有所帮助。快乐编码！！！