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

Question

我收到了数组中的值，然后做了一个foreach来实现其中的每个值。在将每个值添加到checkbox之后，创建一个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、名称和值。

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

代码的糟糕之处在于，每次单击复选框时，它都会向服务器发送一个请求。所以我为你的问题提供了一个简单的解决方案。

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

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

Answer 3

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

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

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

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

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

5. 然后使用CCD_ 14将数组格式化为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>