使用 jquery 提交多个表单，为每个值添加 onchange 事件以触发 php 文件

Question

我有一些代码可以正常工作。 jquery 脚本在单击提交 link 时提交来自 html 表单的所有数据。通过单击提交按钮，表单将自身缩减为所选内容，并在表单下方显示此过滤事件的产品。我想为每个输入值添加一个 onchange 函数，以提前显示此过滤的结果。结果应出现在结果 div 中，并且应在更改复选框值时实时更新。我如何实现这一目标？我需要帮助来创建 jquery 函数来收集点击的复选框。

这是代码。 http://phpfiddle.org/main/code/gc4t-grw3

PHP

<?php 
$result = (isset($_POST)) ? $_POST : "";
foreach ($_POST as $key => $b) {
    if (is_array($b)){    
    $result = array_unique($b);
    $option_filter_help = implode(", ", $result); 
    }
}
print_r($result);
if (isset($_POST)){
   echo($option_filter_help);
   }
?>

Javascript

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#submit").click(function(event) {
        inputs = $(".myForm input");
        inputs.each(function(index) {
            $(inputs[index]).clone(true).appendTo("#submit-form").css("display", "none");
        });
    });
});

HTML

<div id="results"></div>
<form action="" method="POST" class="myForm" onsubmit="return false;">
<label><input type="checkbox" name="optfilter[]" value="36" />36</label>
<label><input type="checkbox" name="optfilter[]" value="26" />26</label>
<label><input type="checkbox" name="optfilter[]" value="16" />16</label>
<label><input type="checkbox" name="optfilter[]" value="66" />66</label>
<label><input type="checkbox" name="optfilter[]" value="76" />76</label>
<label><input type="checkbox" name="optfilter[]" value="86" />86</label>
</form>
<form action="" method="POST" class="myForm" onsubmit="return false;">
<label><input type="checkbox" name="optfilter[]" value="136"/>136</label>
<label><input type="checkbox" name="optfilter[]" value="126"/>126</label>
<label><input type="checkbox" name="optfilter[]" value="116"/>116</label>
<label><input type="checkbox" name="optfilter[]" value="66" />66</label>
<label><input type="checkbox" name="optfilter[]" value="176"/>176</label>
<label><input type="checkbox" name="optfilter[]" value="86" />86</label>
</form> 
<form action="" method="POST" class="myForm" onsubmit="return false;">
<label><input type="checkbox" name="optfilter[]" value="236"/>236</label>
<label><input type="checkbox" name="optfilter[]" value="226"/>226</label>
<label><input type="checkbox" name="optfilter[]" value="216"/>216</label>
<label><input type="checkbox" name="optfilter[]" value="26"/>26</label>
<label><input type="checkbox" name="optfilter[]" value="276"/>276</label>
<label><input type="checkbox" name="optfilter[]" value="286"/>286</label>
</form>
<!-- Target form -->
<form action="" method="POST" id="submit-form">
<input type="submit" id="submit" />
</form>

Answer 1

为复选框更改启动事件侦听器并将结果数据附加到容器。

示例：

$('input[type="checkbox"]').change(function() {
     var vals = $('input[type="checkbox"]:checked').map(function(){
         return $(this).val();
     }).get();
     $('#results').text((vals.length ? vals.join(', ') : 'Nothing selected.'))
});

使用 jquery 提交多个表单，为每个值添加 onchange 事件以触发 php 文件

Submit Multiple Forms with jquery add onchange event for each value to fire php file

html

php

forms

jquery

onchange