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

我已经从数组中收到了值，然后进行了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') ?>)">
} 

---

正如您所看到的，我只需要获取foreach下面复选框的所有选定值，并将其传递给controller。

您正在循环的数组是一个关联数组，这意味着它有键值对。在这样的数组上循环时，可以在

foreach

语句中对键和值进行分解。通过这种方式，您可以动态设置每个复选框的id、名称和值

使您的ID和名称唯一实际上非常重要。Takes使元素彼此区分成为可能，并使每个输入与一个值配对成为可能。虽然名称可以相同，但现在要使它们唯一

将

元素包装在

标记中。这个表单标记将使您更容易使用jQuery，并在需要时从每个输入中获取所有值。还要添加一个

来提交表单

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

我创建了一个按钮来提交表单，因为您不能对每个复选框使用
onclick（）。因此，使用
onclick=assignID（）
创建一个按钮


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


我保持复选框的名称不变，以便以后可以使用
getElementsByName（vehicle1）
函数访问它们


在
assignID（）
中，我创建了一个数组来保存复选框的值


然后使用
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>


您的代码的缺点是，每次单击复选框时，它都会向您的服务器发送请求。因此，我为您的问题提供了一个简单的解决方案

在您的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>

我希望这对你有帮助。快乐编码
 现在你在
警报（val）中得到了什么？？？由于foreach循环，可以根据数组的值生成checbox。因此，我正在获取每个复选框的值，但在将其传递给控制器时，只有一个值传递而不是所有选中的复选框值。@KUMAR每个选中的复选框只有一个值。我需要获取所有选中的值。您的问题是否已解决？？？@KUMAR yes bro感谢您回答我的问题。非常感谢。
$('#vehicleForm').on('submit', function(event) {
  event.preventDefault();
  var $this = $(this);
  var data = $this.serialize();
  assignIds(data)
});

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

<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);
           }
        });
    });